HTML DOM 改變 HTML 内容

2021-07-15 09:50:41

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

JavaScript 能夠建立動态的 HTML 内容：

今天的日期是：

Thu Feb 25 2016 19:25:10 GMT+0800

在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫内容。

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

嘗試一下 »

HTML DOM 改變 HTML 内容

絕對不要在文檔加載完成之後使用 document.write()。這會覆寫該文檔。

修改 HTML 内容的最簡單的方法是使用 innerHTML 屬性。

如需改變 HTML 元素的内容，請使用這個文法：

document.getElementById(id).innerHTML=new HTML

本例改變了 <p>元素的内容：

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="New text!";

本例改變了 <h1> 元素的内容：

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="New Header";

執行個體講解：

上面的 HTML 文檔含有 id="header" 的 <h1> 元素

我們使用 HTML DOM 來獲得 id="header" 的元素

JavaScript 更改此元素的内容 (innerHTML)

如需改變 HTML 元素的屬性，請使用這個文法：

document.getElementById(id).attribute=new value

本例改變了 <img> 元素的 src 屬性：

document.getElementById("image").src="landscape.jpg";

上面的 HTML 文檔含有 id="image" 的 <img> 元素

我們使用 HTML DOM 來獲得 id="image" 的元素

JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

繼續閱讀