Latest web development tutorials

elemen HTML DOM

Menambah, menghapus dan mengganti elemen HTML.

Membuat elemen HTML baru - appendChild ()

Untuk menambahkan elemen baru ke DOM HTML, Anda harus membuat dulu elemen dan menambahkan 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>

Coba »

Contoh analisis

Kode ini menciptakan baru <p> elemen:

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

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

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

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

para.appendChild(node);

Akhirnya, Anda harus menambahkan elemen baru ini untuk unsur-unsur yang ada.

Cari kode ini ke elemen yang ada:

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

Kode untuk menambahkan elemen baru ke elemen yang ada:

element.appendChild(para);

Membuat elemen HTML baru - insertBefore ()

Pada salah satu contoh dari appendChild () metode, unsur baru sebagai elemen anak terakhir induk elemen untuk menambahkan.

Jika Anda tidak ingin ini, Anda dapat menggunakan () metode insertBefore:

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>

Coba »

Menghapus elemen HTML yang ada

Untuk menghapus elemen HTML, Anda harus mengetahui elemen 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>


Coba »

Contoh analisis

Dokumen ini berisi HTML <div> elemen dalam salah satu dari dua node anak (dua <p> elemen) dengan:

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

Cari id = "Div1" unsur-unsur:

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

Cari id = "p1" yang <p> elemen:

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

Hapus dari induk elemen sub-unsur:

parent.removeChild(child);

lampu Dapatkah saya menghapus elemen dalam kasus ini tidak merujuk pada elemen induk?
Maaf. DOM perlu memahami unsur-unsur yang ingin Anda hapus, serta elemen induknya.

Berikut adalah solusi umum: untuk menemukan sub-elemen yang Anda butuhkan untuk menghapus, dan kemudian menggunakan atribut parentNode untuk menemukan elemen induknya:

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

Menggantikan elemen HTML

Untuk mengganti elemen HTML DOM, menggunakan () metode replaceChild:

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>

Coba »