JavaScript HTML DOM - 改變 HTML

HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

改變 HTML 輸出流

JavaScript 能夠創建動態 HTML 內容：

在 JavaScript 中，document.write() 可用于直接寫入 HTML 輸出流：

實例

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

親自試一試

千萬不要在文檔加載后使用 document.write()。這么做會覆蓋文檔。

改變 HTML 內容

修改 HTML 文檔內容最簡單的方法是，使用 innerHTML 屬性。

如需修改 HTML 元素的內容，請使用此語法：

document.getElementById(id).innerHTML = new text

本例修改了 <p> 元素的內容：

實例

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

親自試一試

例子解釋：

  • 上面的 HTML 文檔包含 id="p1" 的 <p> 元素
  • 我們使用 HTML DOM 來獲取 id="p1" 的這個元素
  • JavaScript 把該元素的內容（innerHTML）更改為 "Hello Kitty!"

本例修改了 <h1> 元素的內容：

實例

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

親自試一試

例子解釋：

  • 上面的 HTML 含有 id="header" 的一個 <h1> 元素
  • 我們使用了 HTML DOM 來獲取 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"