Hướng dẫn replace outerhtml javascript - thay thế externalhtml javascript

Để chỉ có được biểu diễn HTML của nội dung của một phần tử hoặc để thay thế nội dung của một phần tử, hãy sử dụng thuộc tính var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 4 thay thế.

Giá trị

Đọc giá trị của var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 2 trả về một chuỗi chứa tuần tự hóa HTML của var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 6 và hậu duệ của nó. Đặt giá trị của var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 2 thay thế phần tử và tất cả các hậu duệ của nó bằng một cây dom mới được xây dựng bằng cách phân tích phân tích var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 8 được chỉ định.

Ngoại lệ

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

// Function
function updateElement (element, attributes) {
  for (attr in attributes) {
    element.setAttribute(attr, attributes[attr]);
  }
}


// Use
var myNode = document.getElementById("myNode");
var attributes = {
    updated: true,
    foo: bar
};

updateElement(myNode, attributes);

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

// Function
function updateElement (element, attributes) {
  for (attr in attributes) {
    element.setAttribute(attr, attributes[attr]);
  }
}


// Use
var myNode = document.getElementById("myNode");
var attributes = {
    updated: true,
    foo: bar
};

updateElement(myNode, attributes);

// Function
function updateElement (element, attributes) {
  for (attr in attributes) {
    element.setAttribute(attr, attributes[attr]);
  }
}


// Use
var myNode = document.getElementById("myNode");
var attributes = {
    updated: true,
    foo: bar
};

updateElement(myNode, attributes);

Ném nếu một nỗ lực được thực hiện để đặt var el = document.getElementById("myNode"); el.setAttribute('updated', true); el.setAttribute('foo', 'bar'); el.textContent = 'new text'; 2 trên một phần tử là một đứa trẻ trực tiếp của // Function function updateElement (element, attributes) { for (attr in attributes) { element.setAttribute(attr, attributes[attr]); } } // Use var myNode = document.getElementById("myNode"); var attributes = { updated: true, foo: bar }; updateElement(myNode, attributes); 5, chẳng hạn như // Function function updateElement (element, attributes) { for (attr in attributes) { element.setAttribute(attr, attributes[attr]); } } // Use var myNode = document.getElementById("myNode"); var attributes = { updated: true, foo: bar }; updateElement(myNode, attributes); 6.

Ví dụ

HTML

<div id="d">
  <p>Contentp>
  <p>Further Elaboratedp>
div>

JavaScript

const d = document.getElementById("d");
console.log(d.outerHTML);

// The string '
Content
Further Elaborated
'
// is written to the console window

Thay thế một nút bằng cách đặt thuộc tính Outerhtml

HTML

<div id="container">
  <div id="d">This is a div.div>
div>

JavaScript

const container = document.getElementById("container");
const d = document.getElementById("d");

console.log(container.firstElementChild.nodeName); // logs "DIV"

d.outerHTML = "
This paragraph replaced the original div.
";

console.log(container.firstElementChild.nodeName); // logs "P"

// The #d div is no longer part of the document tree,
// the new paragraph replaced it.

Thay thế một nút bằng cách đặt thuộc tính Outerhtml

Ghi chú

const div = document.createElement("div");
div.outerHTML = "
test
";
console.log(div.outerHTML); // output: "
"

Nếu phần tử không có phần tử cha, việc đặt thuộc tính

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

const p = document.querySelector("p");
console.log(p.nodeName); // shows: "P"
p.outerHTML = "
This div replaced a paragraph.
";
console.log(p.nodeName); // still "P";

Ngoài ra, trong khi phần tử sẽ được thay thế trong tài liệu, biến có thuộc tính

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

Bảng BCD chỉ tải trong trình duyệt

• Xem thêm
• Tuần tự hóa cây Dom thành chuỗi XML:

  // Function
  function updateElement (element, attributes) {
    for (attr in attributes) {
      element.setAttribute(attr, attributes[attr]);
    }
  }
  
  
  // Use
  var myNode = document.getElementById("myNode");
  var attributes = {
      updated: true,
      foo: bar
  };
  
  updateElement(myNode, attributes);
  

  9

• document.getElementById("myNode").setAttribute('updated', true);
  document.getElementById("myNode").setAttribute('foo', 'bar');
  document.getElementById("myNode").textContent = 'hello world!!!';
  

  1