最新的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»