Home » Javascript » Node DOM: Elemen dan Contoh Codenya

Node DOM: Elemen dan Contoh Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

Menambah dan Menghapus Node (Elemen HTML).

Membuat Elemen HTML Baru (Node)

Untuk menambahkan elemen baru ke DOM HTML, Anda harus membuat elemen (node elemen) terlebih dahulu, lalu menambahkannya ke elemen yang ada.

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Ini Paragraf</p>
<p id="p2">Ini juga paragraf</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("ini baru.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Penjelasan Contoh:

Kode ini membuat elemen <p> baru:

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

Untuk menambahkan teks ke elemen <p>, Anda harus membuat simpul teks terlebih dahulu. Kode ini membuat simpul teks:

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

Kemudian Anda harus menambahkan simpul teks ke elemen <p>:

para.appendChild(node);

Terakhir, Anda harus menambahkan elemen baru ke elemen yang sudah 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()

Metode appendChild() dalam contoh sebelumnya, menambahkan elemen baru sebagai anak terakhir dari induk.

Anda juga bisa menggunakan metode insertBefore().

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Ini paragraf</p>
<p id="p2">Ini juga paragraf.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("ini yang baru");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

Menghapus Elemen HTML yang Ada

Untuk menghapus elemen HTML, gunakan metode remove().

Contoh:

<!DOCTYPE html>
<html>
<body>

<div>
<p id="p1">Ini paragraf</p>
<p id="p2">Ini juga pragraf</p>
</div>


<button onclick="myFunction()">Hapus elemen</button>

<script>
function myFunction() {
  var elmnt = document.getElementById("p1");
  elmnt.remove();
}
</script>

</body>
</html>

Penjelasan Contoh:

Dokumen HTML berisi elemen <div> dengan dua simpul anak (dua <p> elemen).

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

Temukan elemen yang ingin Anda hapus:

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

Kemudian jalankan metode remove () pada elemen itu:

elmnt.remove ();

Metode remove() tidak berfungsi di browser lama, lihat contoh di bawah tentang cara menggunakan removeChild() sebagai gantinya.

Menghapus Node Anak

Untuk browser yang tidak mendukung metode remove(), Anda harus menemukan node induk untuk menghapus elemen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Ini paragraf</p>
<p id="p2">Ini juga paragraf</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

Penjelasan Contoh:

Dokumen HTML ini berisi elemen <div> dengan dua simpul anak (dua <p> elemen):

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

Temukan elemen dengan id = “div1”:

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

Temukan elemen <p> dengan id = “p1”:

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

Hapus anak dari orang tuanya:

parent.removeChild (anak);

Berikut ini solusi yang umum: Temukan anak yang ingin Anda hapus, dan gunakan properti parentNode untuk menemukan induknya:

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

Mengganti Elemen HTML

Untuk mengganti elemen ke DOM HTML, gunakan metode replaceChild().

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Ini Paragraf</p>
<p id="p2">Ini Juga Paragraf</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

You may also like