HTML DOM modifikasi
Memodifikasi HTML = elemen perubahan, atribut, gaya dan acara.
elemen mengedit HTML
Memodifikasi HTML DOM berarti banyak aspek yang berbeda:
- Mengubah konten HTML
- Styles perubahan CSS
- Mengubah atribut HTML
- Membuat elemen HTML baru
- Menghapus elemen HTML yang ada
- Perubahan event (handler)
Pada bagian berikut, kita akan mempelajari secara mendalam DOM HTML untuk memodifikasi metode konvensional.
Buat konten HTML
Cara termudah untuk mengubah isi dari elemen adalah dengan menggunakan properti innerHTML.
Contoh berikut mengubah isi dari HTML <p> elemen:
contoh
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Coba »
 | Kami akan menjelaskan kepada Anda rincian contoh di bagian berikut. |
|---|
gaya perubahan HTML
Melalui DOM HTML, Anda dapat mengakses elemen HTML gaya objek.
Contoh berikut untuk mengubah gaya HTML ayat:
contoh
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Coba »
Membuat elemen HTML baru
Untuk menambahkan elemen baru ke DOM HTML, Anda harus membuat dulu elemen (node elemen), dan kemudian menambahkan ke elemen yang ada.
contoh
<div id="d1">
<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("d1");
element.appendChild(para);
</script>
<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("d1");
element.appendChild(para);
</script>
Coba »