方式一：
使用 document.write()
语法格式：
document.write('新设置的内容<p>标签也可以生成</p>');
注意：在使用方式的时候，write() 输出内容，会把之前的整个页面覆盖掉
方式二：
使用 innerHTML
语法格式：
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
注意：这种方式创建大量的标签会存在效率问题
方式三：
使用 document.createElement() 创建元素节点
语法格式：
var div = document.createElement('div'); //在内存中创建一个元素节点
var textNode = document.createTextNode('Hello World'); //在内存中创建一个文本节点
div.appendChild(textNode); //将文本节点追加到 元素节点内
document.body.appendChild(div);
这种方式，是先在内存中创建一个 DOM 对象，然后把这个对象添加到 DOM 树上。
性能问题
innerHTML 方法由于会对字符串进行解析，需要避免在循环内多次使用。所以并不推荐使用。
innerHTML 的优化：可以先将字符串拼接好，或者直接放入 数组中，再转成字符串，再使用 innerHTML。
注意：
当使用 innerHTML 把一个元素内部清空的时候，如果元素内部有绑定的事件，这些事件并不回自动删除，从而发生了内存泄漏问题。
而 使用 removeChild 移除某个元素的时候，会把与之相应的事件也清除掉的。
Demo：
1 <div id='box'>
2 <input type="button" value="点击" id='btn'>
3 </div>
4
5 <script type="text/javascript">
6 var box = document.getElementById('box');
7 var btn = document.getElementById('btn');
8
9 btn.onclick = function() {
10 alert('Hello javascript');
11 }
12
13 // box.removeChild(btn); 不会发生内存泄漏，绑定事件随之消除
14 box.innerHTML = ""; // 发生内存泄漏，事件不消除，仍然存在
15 </script>
