HTML DOM memungkinkan JavaScript untuk mengubah isi dari elemen HTML.
Mengubah HTML Keluaran Streaming
JavaScript dapat membuat konten HTML dinamis:
Tanggal:Sun 6 November 2016 19:23:35 GMT + 0800 (中国标准时间)
Dalam JavaScript, document.write() dapat digunakan untuk menulis langsung ke output stream HTML:
Contoh
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Cobalah sendiri " Tidak pernah menggunakan document.write() setelah dokumen dimuat. Ini akan menimpa dokumen.
Mengubah Konten HTML
Cara termudah untuk mengubah isi dari sebuah elemen HTML adalah dengan menggunakan innerHTML properti.
Untuk mengubah isi elemen HTML, gunakan sintaks ini:
document.getElementById(id).innerHTML = new HTML
Contoh ini mengubah isi dari <p> elemen:
Contoh
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Cobalah sendiri " Contoh ini mengubah isi dari <h1> elemen:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Cobalah sendiri " Contoh menjelaskan:
- Dokumen HTML di atas mengandung <h1> elemen dengan id="header"
- Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id="header"
- Sebuah JavaScript mengubah konten (innerHTML) dari elemen yang
Mengubah Nilai Atribut
Untuk mengubah nilai atribut HTML, gunakan sintaks ini:
document.getElementById(id).attribute=new value
Contoh ini mengubah nilai atribut src dari <img> elemen:
Contoh
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Cobalah sendiri " Contoh menjelaskan:
- Dokumen HTML di atas berisi <img> elemen dengan id="myImage"
- Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id="myImage"
- Sebuah JavaScript mengubah src atribut dari elemen yang dari "smiley.gif" untuk "landscape.jpg"
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »