修改DOM——innerHTML

本节介绍使用innerHTML来访问以及修改HTML DOM的方法。

我们之前已经了解到一些查询DOM节点的函数，例如getElementById和getElementsByTagName。但是我们不仅可以访问DOM节点，更可以改变它们，甚至改变整个节点树的结构。下面我们就来看看改变DOM的最简单的方法——innerHTML。

innerHTML的意思就是“里面的HTML”，就像它的名字一样容易理解，使用它也是异常的简单。我们先来看一个例子。

访问innerHTML实例代码

<div id="test">
	<p>我是测试段落。</p>
</div>

效果如下：

我是测试段落。

,点击这个按钮就可以显示出div的innerHTML，它调用的JS代码如下：

<script type="text/javascript">
function test(){
	alert(document.getElementById("test").innerHTML);
}
</script>

给元素的innerHTML赋值就可以改变元素的内容了，同样是上面的div，我们创建另外一段代码来改变它的内容：

<script type="text/javascript">
function testW(){
	var str = "<p>面目全非！￥%……&*（）</p>";
	document.getElementById("test").innerHTML = str;
}
</script>

，点击这个按钮就可以执行上面的代码，将第一个例子中div的内容改变。