phương thức replaceChild() của HTML DOM Element

định nghĩa và cách sử dụng

replaceChild() phương thức sử dụng để thay thế nút con mới.

xem thêm:

phương thức removeChild()

phương thức remove()

phương thức appendChild()

phương thức insertBefore()

thuộc tính childNodes

thuộc tính firstChild

thuộc tính lastChild

thuộc tính firstElementChild

thuộc tính lastElementChild

các phương thức tài liệu liên quan:

phương thức createElement()

phương thức createTextNode()

mô hình

ví dụ 1

thay thế văn bản mới cho văn bản trong phần tử <li>:

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

Trước khi thay thế:

  • Coffee
  • Tea
  • Milk

Sau khi thay thế:

  • Water
  • Tea
  • Milk

Thử nghiệm ngay

ví dụ 2

Thay thế yếu tố <li> bằng yếu tố <li> mới:

// Tạo một yếu tố <li> mới:
const element = document.createElement("li");
// Tạo một văn bản mới:
const textNode = document.createTextNode("Water");
// Thêm văn bản vào yếu tố <li>:
element.appendChild(textNode);
// Lấy yếu tố <ul> với id="myList":
const list = document.getElementById("myList");
// Thay thế đầu tiên con của <li> bằng một <li> mới:
list.replaceChild(element, list.childNodes[0]);

Trước khi thay thế:

  • Coffee
  • Tea
  • Milk

Sau khi thay thế:

  • Water
  • Tea
  • Milk

Thử nghiệm ngay

Cú pháp

node.replaceChild(newnode, oldnode)

参數

参數 Mô tả
newnode Bắt buộc. Nút cần chèn.
oldnode Bắt buộc. Nút cần xóa.

Giá trị trả về

Loại Mô tả
Đối tượng Node Nút cần thay thế.

Hỗ trợ trình duyệt

element.replaceChild() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ