วิธีการ replaceChild() ของ HTML DOM Element

คำนิยามและวิธีใช้

replaceChild() วิธีการใช้โหมดใหม่ที่แทนที่ตัวเก็บเนื้อหาลูก

ดูเพิ่มเติม:

วิธีการ removeChild()

วิธีการ remove()

วิธีการ appendChild()

วิธีการ insertBefore()

ตัวแปร childNodes

ตัวแปร firstChild

ตัวแปร lastChild

ตัวแปร firstElementChild

ตัวแปร lastElementChild

วิธีการที่เกี่ยวข้อง

วิธีการ createElement()

วิธีการ createTextNode()

ตัวอย่าง

ตัวอย่าง 1

แทนที่ตัวอักษรเนื้อหาด้วยตัวอักษรใหม่ใน <li> อิเลเมนต์

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

ก่อนการแทนที่:

  • Coffee
  • Tea
  • Milk

หลังจากการแทนที่:

  • Water
  • Tea
  • Milk

ทดลองด้วยตัวเอง

ตัวอย่าง 2

แทนที่ <li> ด้วย <li> ใหม่

// สร้าง <li> ใหม่
const element = document.createElement("li");
// สร้างโครงการข้อความใหม่
const textNode = document.createTextNode("Water");
// แอปเพนด์โครงการข้อความไปยัง <li> อิเลเมนต์
element.appendChild(textNode);
// ดึง <ul> ที่มี id="myList"
// ดึง <ul> ที่มี id="myList"
// แทนที่โครงการ <li> แรกด้วยโครงการ <li> ใหม่
list.replaceChild(element, list.childNodes[0]);

ก่อนการแทนที่:

  • Coffee
  • Tea
  • Milk

หลังจากการแทนที่:

  • Water
  • Tea
  • Milk

ทดลองด้วยตัวเอง

การใช้งาน

node.replaceChild(newnode, oldnode)

ตัวแปร

ตัวแปร คำอธิบาย
newnode จำเป็น โครงการที่ต้องการใส่
oldnode จำเป็น โครงการที่ต้องการลบ

ค่าที่กลับมา

ชนิด คำอธิบาย
เป้าหมาย Node โครงการที่ถูกแทนที่

การสนับสนุนโดยบราวเซอร์

element.replaceChild() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกบราวเซอร์ต่างๆ สนับสนุนมันอย่างเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน