Elemen DOM HTML HTML
Elemen DOM HTML JavaScript
Buat Elemen HTML Baharu
Buat Elemen HTML Baharu
Untuk menambah elemen baharu pada DOM HTML, Anda mesti mencipta elemen (nod elemen) dahulu dan kemudian menambahkan elemen itu pada elemen sedia ada.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>Contoh analisis:
Kod ini mencipta elemen <p> baharu:
var para=document.createElement("p");
Untuk menambah teks pada elemen <p> anda mesti membuat nod teks terlebih dahulu. Kod ini mencipta nod teks:
var node=document.createTextNode("Ini adalah perenggan baharu.");
Kemudian anda perlu menambahkannya pada <p> ; elemen Tambahkan nod teks ini:
para.appendChild(node);
Akhir sekali anda mesti menambahkan elemen baharu pada elemen sedia ada.
Kod ini mencari elemen sedia ada:
var element=document.getElementById("div1");
Kod berikut mencari elemen sedia ada Kemudian tambahkan elemen baharu:
element.appendChild(para);
Padamkan elemen HTML sedia ada
Kod ini menambahkan elemen baharu pada elemen sedia ada Elemen:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>Dokumen HTML ini mengandungi elemen <div> dengan dua nod anak (dua <p> elemen):
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>
Cari elemen dengan id="div1":
var parent=document.getElementById("div1");
Cari <p> elemen dengan id="p1":
var child=document(" p1");
Alih keluar elemen kanak-kanak daripada elemen induk:
ibu bapa.removeChild(anak);
Alangkah baiknya jika anda boleh memadamkan elemen tanpa merujuk elemen induk.
Tetapi sayang sekali. DOM perlu mengetahui elemen yang anda perlu padamkan dan elemen induknya.
Ini ialah penyelesaian biasa: cari elemen anak yang ingin anda alih keluar dan kemudian gunakan sifat parentNodenya untuk mencari elemen induk:
var child=document.getElementById ( "p1");
child.parentNode.removeChild(child);
Tutorial HTML DOM
Dalam bahagian HTML DOM tutorial JavaScript kami, anda telah mempelajari:
Cara menukar kandungan elemen HTML (innerHTML) Cara menukar gaya elemen HTML (CSS) Cara bertindak balas terhadap peristiwa HTML DOM Cara menambah atau mengalih keluar elemen HTML
