JavaScript HTML DOM 改變HTML 內容
HTML DOM 允許JavaScript 改變HTML 元素的內容。
改變HTML 輸出流
JavaScript 能夠創建動態的HTML 內容：
今天的日期是：
在JavaScript 中，document.write() 可用於直接向HTML 輸出流寫內容。
 | 絕對不要在文檔加載完成之後使用document.write()。 這會覆蓋該文檔。 |
|---|
改變HTML 內容
修改HTML 內容的最簡單的方法時使用innerHTML 屬性。
如需改變HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了<p>元素的內容：
實例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
嘗試一下»
本例改變了<h1> 元素的內容：
實例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
嘗試一下»
實例講解：
- 上面的HTML 文檔含有id="header" 的<h1> 元素
- 我們使用HTML DOM 來獲得id="header" 的元素
- JavaScript 更改此元素的內容(innerHTML)
改變HTML 屬性
如需改變HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=新属性值
本例改變了<img> 元素的src 屬性：
實例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
嘗試一下»
實例講解：
- 上面的HTML 文檔含有id="image" 的<img> 元素
- 我們使用HTML DOM 來獲得id="image" 的元素
- JavaScript 更改此元素的屬性（把"smiley.gif" 改為"landscape.jpg"）