动态增加HTML元素

HTML文档可以利用HTML的DOM轻松访问和操作,它是将HTML文档表示为一个树型结构。当一个浏览器加载了一个HTML文档,它就变成文档对象。使用JavaScript的document.createElement() 方法可以动态创建一个HTML元素。创建之后,可以添加属性。如果你想让这个元素显示在你的文档里面,你必须将它插入到DOM-树里面。

例子

<html>
<body>
<button onclick="create()">Create Heading</button>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>

document.createElement是利用HTML标签创建元素。然后可以编辑文本内容,用setAttribute设置类的属性。这个也可以用于添加数据属性,或者其他任何种类的属性,和在HTML中一样的操作。最后用元素体的appendChild方法追加到body上。

实际上,它本质上等价于< h1 class="note" > New Heading!!! < /h1 > 。

我们在这里展示的能力,可以随时创建和改变元素样式。由设计者决定,是在页面上设计全部元素,还是在运行时按需创建,通过createElement() 方法动态实现。

原文链接