JavaScript HTML DOM - Mengubah HTML
DOM HTML memungkinkan JavaScript untuk mengubah konten elemen HTML.
Mengubah Konten HTML
Cara termudah untuk memodifikasi konten elemen HTML adalah dengan menggunakan innerHTML
properti.
Untuk mengubah konten elemen HTML, gunakan sintaks ini:
document.getElementById(id).innerHTML = new HTML
Contoh ini mengubah konten <p>
elemen:
Contoh
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Contoh menjelaskan:
- Dokumen HTML di atas berisi
<p>
elemen denganid="p1"
- Kami menggunakan DOM HTML untuk mendapatkan elemen dengan
id="p1"
- JavaScript mengubah konten (
innerHTML
) elemen tersebut menjadi "Teks baru!"
Contoh ini mengubah konten <h1>
elemen:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Contoh menjelaskan:
- Dokumen HTML di atas berisi
<h1>
elemen denganid="id01"
- Kami menggunakan DOM HTML untuk mendapatkan elemen dengan
id="id01"
- JavaScript mengubah konten (
innerHTML
) elemen itu menjadi "Judul Baru"
Mengubah Nilai Atribut
Untuk mengubah nilai atribut HTML, gunakan sintaks ini:
document.getElementById(id).attribute = new value
Contoh ini mengubah nilai atribut src dari suatu <img>
elemen:
Contoh
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Contoh menjelaskan:
- Dokumen HTML di atas berisi
<img>
elemen denganid="myImage"
- Kami menggunakan DOM HTML untuk mendapatkan elemen dengan
id="myImage"
- JavaScript mengubah
src
atribut elemen itu dari "smiley.gif" menjadi "landscape.jpg"
Konten HTML dinamis
JavaScript dapat membuat konten HTML dinamis:
Tanggal : Sab Jan 29 2022 21:06:46 GMT+0000 (Waktu Universal Terkoordinasi)
Contoh
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
dokumen.tulis()
Dalam JavaScript, document.write()
dapat digunakan untuk menulis langsung ke aliran keluaran HTML:
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Jangan pernah gunakan document.write()
setelah dokumen dimuat. Ini akan menimpa dokumen.