JavaScript HTML DOM - Mengubah HTML

HTML DOM memungkinkan JavaScript untuk mengubah konten elemen HTML.

Perubahan aliran output HTML

JavaScript dapat membuat konten HTML dinamis:

Dalam JavaScript,document.write() Dapat digunakan untuk menulis langsung ke aliran output HTML:

Contoh

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Coba Sendiri

Jangan gunakan document.write() setelah dokumen dimuat document.write(). Ini akan menimpa dokumen.

Perubahan konten HTML

Yang paling sederhana untuk mengubah konten dokumen HTML adalah, menggunakan innerHTML Atribut.

Untuk mengubah konten elemen HTML, gunakan sintaks ini:

document.getElementById(id).innerHTML = text baru

Pada contoh ini diubah nilai <p> Konten elemen:

Contoh

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Coba Sendiri

Penjelasan Contoh:

  • Dokumen HTML di atas mengandung elemen <p> dengan id="p1"
  • Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="p1"
  • JavaScript mengubah konten elemen (innerHTML) menjadi "Hello Kitty!"

Pada contoh ini diubah nilai <h1> Konten 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>

Coba Sendiri

Penjelasan Contoh:

  • HTML di atas mengandung elemen <h1> dengan id="header"
  • Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="header"
  • JavaScript mengubah konten elemen ini (innerHTML)

Ubah nilai atribut

Untuk mengubah nilai atribut HTML, gunakan sintaks berikut:

document.getElementById(id).atribut = nilai baru

Pada contoh ini diubah nilai <img> Elemen src Nilai Atribut:

Contoh

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Coba Sendiri

Penjelasan Contoh:

  • Dokumen HTML di atas mengandung elemen <img> dengan id="myImage"
  • Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id="myImage"
  • JavaScript mengubah atribut src elemen ini dari "smiley.gif" ke "landscape.jpg"