Menambah dan Menghapus Nodes (HTML Elements)
Membuat New HTML Elements (Nodes)
Untuk menambahkan elemen baru ke DOM HTML, Anda harus membuat elemen (elemen node) pertama, dan kemudian tambahkan ke elemen yang ada.
Contoh
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Cobalah sendiri " misalnya Dijelaskan
Kode ini menciptakan baru <p> elemen:
var para = document.createElement("p");
Untuk menambahkan teks ke <p> elemen, Anda harus membuat simpul teks pertama. Kode ini menciptakan node teks:
var node = document.createTextNode("This is a new paragraph.");
Kemudian Anda harus menambahkan node teks ke <p> elemen:
para.appendChild(node);
Akhirnya Anda harus menambahkan elemen baru ke elemen yang ada.
Kode ini menemukan elemen yang ada:
var
element = document.getElementById("div1");
Kode ini menambahkan elemen baru ke elemen yang ada:
element.appendChild(para);
Membuat Elemen HTML baru - insertBefore()
The appendChild() metode dalam contoh sebelumnya, ditambahkan unsur baru sebagai anak terakhir dari orang tua.
Jika Anda tidak ingin bahwa Anda dapat menggunakan insertBefore() metode:
Contoh
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Cobalah sendiri " Menghapus ada Elemen HTML
Untuk menghapus sebuah elemen HTML, Anda harus mengetahui induk dari elemen:
Contoh
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Cobalah sendiri " Metode node.remove() diimplementasikan dalam DOM 4 spesifikasi.
Tetapi karena dukungan browser miskin, Anda tidak harus menggunakannya.
misalnya Dijelaskan
Dokumen HTML ini berisi <div> elemen dengan dua node anak (dua <p> elemen):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Menemukan elemen dengan id="div1" :
var parent = document.getElementById("div1");
Menemukan <p> elemen dengan id="p1" :
var child = document.getElementById("p1");
Hapus anak dari orang tua:
parent.removeChild(child);
Akan lebih baik untuk dapat menghapus sebuah elemen tanpa mengacu pada orangtua.
Tapi maaf. DOM perlu tahu kedua elemen yang ingin Anda hapus, dan induknya.
Berikut ini adalah solusi yang umum: Cari anak yang ingin Anda hapus, dan menggunakan properti parentNode untuk menemukan orang tua:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Menggantikan HTML Elements
Untuk mengganti elemen ke DOM HTML, gunakan replaceChild() metode:
Contoh
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Cobalah sendiri "