ກົນລະບົບ HTML DOM Element replaceChild()

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

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":
const list = document.getElementById("myList");
// ປ່ຽນຕົວຂໍ້ມູນ <li> ທີ່ເປັນລູກດຽວທີ່ໃນ list:
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 ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ