ວິທີການ appendChild() HTML DOM Element

ການກໍານົດ ແລະ ການນໍາໃຊ້

appendChild() ວິທີການທີ່ສະເໜີຂໍ້ມູນຫຼັກຕົວເປັນຫຼັກລູກສຸດທ້າຍຂອງຫຼັກ.

ບໍ່ບໍ່ບັນຫາ:

ພາສານິວັນ insertBefore()

ພາສານິວັນ replaceChild()

ພາສານິວັນ removeChild()

ພາສານິວັນ remove()

ຜົນງານ childNodes

ຜົນງານ firstChild

ຜົນງານ lastChild

ຜົນງານ firstElementChild

ຜົນງານ lastElementChild

ພາສານິວັນທີ່ກ່ຽວຂ້ອງ:

ພາສານິວັນ createElement()

ພາສານິວັນ createTextNode()

ຄວາມລະອຽດ

ຕົວຢ່າງ 1

ການເພີ່ມບັນດາບັນທຶກໃນລາຍການ:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

ກ່ອນການເພີ່ມ:

  • ກາເຟ
  • ສາມິນ

ຫຼັງຈາກການເພີ່ມ:

  • ກາເຟ
  • ສາມິນ
  • ນ້ຳ

ສວບສວນຢ່າງເອງ

ຕົວຢ່າງ 2

ການຂົນສົ່ງບັນດາບັນທຶກຈາກລາຍການໜຶ່ງໄປລາຍການອື່ນອີກ:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

ກ່ອນຍ້າຍ

  • ກາເຟ
  • ສາມິນ

  • ນ້ຳ
  • ນົມ

ຫຼັງການຍ້າຍ

  • ກາເຟ
  • ສາມິນ
  • ນົມ

  • ນ້ຳ

ສວບສວນຢ່າງເອງ

ຄວາມຈະແມ່ນ 3

ສ້າງວິດີໂອຫົວອາດີດທີ່ມີຫຼັກຂໍ້

  • ສ້າງຫົວອາດີດ
  • ສ້າງຫົວອາດີດສັບສົນ
  • ຕິດຕັ້ງຫົວອາດີດສັບສົນມາໃນວິດີໂອ
  • ຕິດຕັ້ງວິດີໂອຫຼັກສູດມາໃນຂອງຂັບເຄື່ອງ

ສ້າງຫົວອາດີດ <p> ແລະຕິດຕັ້ງມາໃນຫົວອາດີດ <div>.

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

ສວບສວນຢ່າງເອງ

ຄວາມຈະແມ່ນ 4

ສ້າງຫົວອາດີດ <p> ແລະຕິດຕັ້ງມາໃນຂອງຂັບເຄື່ອງຂອງມູນຄໍາ.

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

ສວບສວນຢ່າງເອງ

ຂອບເຂດ

element.appendChild(node)

ຫຼື

node.appendChild(node)

ການຈຳນວນ

ການຈຳນວນ ການອະທິບາຍ
node ສະຫຼຸບ. ຫົວອາດີດທີ່ຕ້ອງຕິດຕັ້ງ.

ການຖະແຫຼງຂອງ

ຊະນິດ ການອະທິບາຍ
ຫົວອາດີດ ຫົວອາດີດທີ່ທີ່ຕິດຕັ້ງ

ການສະໜັບສະໜູນຈາກບັນຊີວະ

element.appendChild() ເປັນລັກສະນະ DOM Level 1 (1998).

ທຸກການອານຸພາບການຄອມພິວເຕີ້ທັງໝົດສະໜັບສະໜູນມັນ:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ 9-11 ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ