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