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