JavaScript HTML DOM - 改变 HTML

HTML DOM memungkinkan JavaScript untuk mengubah kandungan elemen HTML.

Perubahan aliran output HTML

JavaScript dapat membuat kandungan HTML dinamis:

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

实例

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

亲自试一试

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

Perubahan kandungan HTML

Yang paling mudah untuk mengubah kandungan dokumen HTML adalah, menggunakan innerHTML atribut.

Untuk mengubah kandungan elemen HTML, gunakan sintaks ini:

document.getElementById(id).innerHTML = teks baru

本例修改了 <p> Kandungan elemen:

实例

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

亲自试一试

例子解释：

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

本例修改了 <h1> Kandungan elemen:

实例

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

亲自试一试

例子解释：

  • HTML di atas mengandung elemen <h1> dengan id="header"
  • Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="header"
  • JavaScript 更改此元素的内容（innerHTML）

改变属性的值

如需修改 HTML 属性的值，请使用如下语法：

document.getElementById(id).attribute = new value

本例修改了 <img> 元素的 src 属性的值：

实例

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

亲自试一试

例子解释：

  • 上面的 HTML 文档含有一个 id="myImage" 的 <img> 元素
  • 我们使用 HTML DOM 来获取 id="myImage" 的元素
  • JavaScript 把此元素的 src 属性从 "smiley.gif" 更改为 "landscape.jpg"