使用JavaScript实现HTML动态代码

最简单的方法是使用innerHTML 属性改变一个HTML元素的内容。innerHTML属性获得或者设置一个元素里面的HTML或者XML标记内容。依靠使用这个属性,所有现代版浏览器都支持,我们可以设计任何内容元素的新的HTML或文本内容,页面可以及时更新并且随时显示新内容。

document.getElementById('test').innerHTML="This is heading using JavaScript";
This will change...

源程序

<html>
<body>
<div id="test"><b>This will change...</b></div>
<button onclick="changeIt()">Change....</button>
<script>
function changeIt() {
document.getElementById('test').innerHTML="Changed using innerHTML!!";
}
</script>
</body>
</html>

例子讲解:

上面包含div元素的HTML文档,有 id="test"。用HTML的DOM使用id="test"获得元素。 JavaScript 改变了这个元素的内容(innerHTML)为"Changed using innerHTML!!"

DOMString 包括元素子元素的 HTML序列化 。设置innerHTML的值,将移除所有元素的子元素,并且通过解析给定的htmlString利用结构节点去替换。它被广泛应用在网页里面,用以产生动态html,例如注册窗体,留言窗体,链接等等。

原文链接