动态增加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() 方法动态实现。