Javascript : Memodifikasi (Mengubah,Menambah,Menghapus) Elemen pada HTML [Bagian 3]
2:09 AM
Menuju bagian 2
Daftar content:
Menghapus Elemen
Untuk menghapus sebuah elemen HTML, kita harus memilih parent-nya terlebih dahulu, setelah itu kita menghapus menggunakan metodeparent.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 metodeparent.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
0 comments