我们之前已经了解到一些查询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实例代码
给元素的innerHTML赋值就可以改变元素的内容了,同样是上面的div,我们创建另外一段代码来改变它的内容:
<script type="text/javascript">
function testW(){
var str = "<p>面目全非!¥%……&*()</p>";
document.getElementById("test").innerHTML = str;
}
</script>
,点击这个按钮就可以执行上面的代码,将第一个例子中div的内容改变。
原地址 http://www.cainiao8.com/web/html_dom/html_dom_07_innerHTML.html