ພາສາເຈີບັນ ສາຍເຮັດຕັ້ງໂຕ ປ່າຍ (ບັນດາບັນນາທິດ)

ການເພີ່ມ ແລະ ເພື່ອນຫນັງກອງສັນຍານ (ປະກອບສັນຍານ HTML)

ສ້າງປະກອບສັນຍານ HTML

ສຳລັບການເພີ່ມປະກອບສັນຍານ HTML DOM ທີ່ຈະມີຢູ່ວ່າເຈົ້າຕ້ອງການສ້າງປະກອບສັນຍານດັ່ງກ່າວຫນັງ (ກອງສັນຍານ) ແລະ ສະເໜີວ່າຫນັງປະກອບສັນຍານທີ່ມີຢູ່ແລ້ວ。

ຄວາມນິຍົມ

<div id="div1">
<p id="p1">ນີ້ແມ່ນຂໍ້ຄວາມ.</p>
<p id="p2">ນີ້ແມ່ນຂໍ້ຄວາມຫລັງ.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("ນີ້ແມ່ນຂໍ້ຄວາມໂທລະຍົມ.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

ການທົດລອງດ້ວຍຕົວເອງ

ຄວາມຄິດທີ່ຈະຊອກຫາ

ວິທີດັ່ງກ່າວນີ້ສ້າງຫົວໜ້າທີ່ໃໝ່ <p> ສະແນວ

var para = document.createElement("p");

ສຳລັບການເພີ່ມ <p> ສຳລັບການເພີ່ມຄວາມຂຽນໃນສະແນວທີ່ມີແລ້ວ ທ່ານຕ້ອງສ້າງຫົວໜ້າຂຽນທີ່ໃໝ່ກ່ອນ ວິທີດັ່ງກ່າວນີ້ສ້າງຫົວໜ້າຂຽນທີ່ໃໝ່

var node = document.createTextNode("This is a new paragraph.");

ຫຼັງຈາກນັ້ນທ່ານຈະເພີ່ມ <p> element.appendChild(textNode);

para.appendChild(node);

ສຸດທ້າຍທ່ານຈະເພີ່ມສະແນວໃໝ່ເຂົ້າໃນສະແນວທີ່ມີແລ້ວ

ວິທີດັ່ງກ່າວນີ້ຈະຊອກຫາສະແນວທີ່ມີແລ້ວ

var element = document.getElementById("div1");

ວິທີດັ່ງກ່າວນີ້ຈະເພີ່ມສະແນວໃໝ່ເຂົ້າໃນສະແນວທີ່ມີແລ້ວ

element.appendChild(para);

create new HTML element - insertBefore()

ຄວາມຄິດທີ່ຈະສ້າງ appendChild() ວິທີການ

ນອກຈາກນັ້ນທ່ານຈະໃຊ້ insertBefore() ກົນລະບຽບ:

ຄວາມນິຍົມ

<div id="div1">
<p id="p1">ນີ້ແມ່ນຂໍ້ຄວາມ.</p>
<p id="p2">ນີ້ແມ່ນຂໍ້ຄວາມຫລັງ.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("ນີ້ແມ່ນຂໍ້ຄວາມໂທລະຍົມ.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

ການທົດລອງດ້ວຍຕົວເອງ

ລຶບສະແນວ HTML

ສຳລັບການລຶບສະແນວ HTML remove() ກົນລະບຽບ:

ຄວາມນິຍົມ

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

ການທົດລອງດ້ວຍຕົວເອງ

ຄວາມຄິດທີ່ຈະຊອກຫາ

ບັນນາທິການ HTML ດັ່ງກ່າວນີ້ມີຫົວໜ້າຂອງຜູ້ລົງມາສອງຫົວໜ້າ (ສອງ <p> ສະແນວ <div> ສະແນວ

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

ຊອກຫາສະແນວທີ່ຈະຖືກລຶບອອກ

const elmnt = document.getElementById("p1");

ຫຼັງຈາກນັ້ນສວນການຂອງສະແນວ remove() ກົນລະບຽບ:

elmnt.remove();

ຄວາມຕ້ອງເຫັນ:ວິທີການ remove() ບໍ່ເຮັດໃຫ້ສະຖານະການເກົ່ານຳມາໄດ້ ບັນທຶກຄວາມຫຍັງທີ່ຈະໃຊ້ removeChild()。

ການລຶບຜູ້ລົງມາ

ສຳລັບການບໍ່ສາມາດບັນທຶກບານບານບານ remove() ສັນຍາລະບາຍຂອງການບັນທຶກບານບານບານ

ຄວາມນິຍົມ

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

ການທົດລອງດ້ວຍຕົວເອງ

ຄວາມຄິດທີ່ຈະຊອກຫາ

ບັນນາທິການ HTML ດັ່ງກ່າວນີ້ມີຫົວໜ້າຂອງຜູ້ລົງມາສອງຫົວໜ້າ (ສອງ <p> ສະແນວ <div> ສະແນວ

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

ຊອກຫາ id="div1" ສະແນວ

const parent = document.getElementById("div1");

ຊອກຫາ id="p1" ຂອງ <p> ສະແນວ

const child = document.getElementById("p1");

ລຶບຜູ້ລົງມາອອກຈາກປະຕູເອກະສານ

parent.removeChild(child);

ນີ້ແມ່ນວິທີທີ່ປົກກະຕິທີ່ຈະຊອກຫາຫົວໜ້າຂອງຜູ້ລົງມາທີ່ຈະຖືກລຶບອອກ ແລະໃຊ້ parentNode ການຊອກຫາຫົວໜ້າຂອງເອກະສານ

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

ປ່ຽນ HTML ປະກອບ

ສຳລັບການປ່ຽນປະຈຳປະກອບ HTML replaceChild() ກົນລະບຽບ:

ຄວາມນິຍົມ

<div id="div1">
<p id="p1">ນີ້ແມ່ນຂໍ້ຄວາມ.</p>
<p id="p2">ນີ້ແມ່ນຂໍ້ຄວາມຫລັງ.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("ນີ້ແມ່ນຂໍ້ຄວາມໂທລະຍົມ.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

ການທົດລອງດ້ວຍຕົວເອງ