Menuju bagian 2

Daftar content:

• Menghapus Elemen
• Mengganti (Replace) Elemen

Menghapus Elemen

Untuk menghapus sebuah elemen HTML, kita harus memilih parent-nya terlebih dahulu, setelah itu kita menghapus menggunakan metode parent.removeChild(node). Contoh:

<div id="hobi">
  <p id="p1">Mendengarkan Musik</p>
  <p id="p2">Ngoding</p>
</div>

<script>
var hobi = document.getElementById("hobi");
var p2 = document.getElementById("p2");
hobi.removeChild(p2);
</script>

Anda juga dapat memanfaatkan properti parentNode untuk memilih parent dari elemen yang akan kita hapus. Contoh:

<div id="hobi">
  <p id="p1">Mendengarkan Musik</p>
  <p id="p2">Ngoding</p>
</div>

<script>
var p2 = document.getElementById("p2");
p2.parentNode.removeChild(p2);
</script>

Mengganti (Replace) elemen

Untuk mengganti sebuah elemen HTML, kita harus membuat terlebih dahulu sebuah node baru, kemudian menggunakan metode parent.replaceChild(nodeBaru, nodeLama)
. Contoh:

<div id="hobi">
  <p id="p1">Mendengarkan Musik</p>
  <p id="p2">Ngoding</p>
</div>

<script>
var newnode=document.createElement("p");
var teksnode=document.createTextNode("Utak atik Komputer");
var hobi = document.getElementById("hobi");
var p1 = document.getElementById("p1");
hobi.replaceChild(newnode,p1);
</script>

Sekian Artikel mengenai DOM dan bagaimana memanipulasi/ Memodifikasi DOM dengan Javascript. Semoga bermanfaat.

Memanipulasi DOM, Memanipulasi elemen, Mengedit DOM, Javascript