最新的Web開發教程
 

JavaScript HTML DOM - 更改HTML


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


更改HTML輸出流

JavaScript可以創建動態HTML內容:

日期:太陽2016年11月6日19時23分35秒GMT + 0800(中國標準時間)

在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 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"

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»