Hướng dẫn outerhtml w3schools - outhtml w3schools

Để 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 const d = document.getElementById("d"); console.log(d.outerHTML); // The string '

Content

Further Elaborated

' // is written to the console window 1 thay thế.

Giá trị

Ngoại lệ

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

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

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

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

Ném nếu một nỗ lực được thực hiện để đặt outerHTML bằng cách sử dụng chuỗi HTML không hợp lệ.

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

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

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

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

Ném nếu một nỗ lực được thực hiện để đặt outerHTML trên một phần tử là con trực tiếp của

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

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

Ví dụ

Nhận giá trị của thuộc tính Outerhtml của một phần tử

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 outerHTML của nó sẽ không thay đổi hoặc con cháu của nó. Nhiều trình duyệt cũng sẽ ném một ngoại lệ. Ví dụ:

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 outerHTML được đặt vẫn sẽ giữ tham chiếu đến phần tử gốc:

const anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: ""

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

• Xem thêm
• Phân tích cú pháp XML hoặc HTML vào cây dom:

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

  7

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

  8