在HTML DOM允許JavaScript改變HTML元素的內容。
更改HTML輸出流
JavaScript可以創建動態HTML內容:
日期:太陽2016年11月6日19時23分35秒GMT + 0800(中國標準時間)
在JavaScript中, document.write()可用於直接寫入到HTML輸出流:
切勿使用document.write()文檔加載後。 這將覆蓋該文件。
更改HTML內容
修改HTML元素的內容,最簡單的方法是使用innerHTML屬性。
要更改HTML元素的內容,使用此語法:
document.getElementById(id).innerHTML = new HTML
這個例子更改了內容<p>元素:
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
試一試» 這個例子改變了內容<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文檔中包含<h1>與元素id="header"
- 我們使用HTML DOM與獲得該元素id="header"
- 一個JavaScript改變內容(innerHTML)該元素的
更改屬性的值
要更改HTML屬性的值,使用此語法:
document.getElementById(id).attribute=new value
這個例子改變了的src屬性值<img>元素:
例
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
試一試» 例子解釋:
- 上面的HTML文檔中包含<img>與元素id="myImage"
- 我們使用HTML DOM與獲得該元素id="myImage"
- 一個JavaScript改變src從元素的屬性"smiley.gif"到"landscape.jpg"