JavaScript 之 创建元素

方式一：

　　　使用  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：

<div id='box'>
    <input type="button" value="点击" id='btn'>
</div>

<script type="text/javascript">
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');

    btn.onclick = function() {
        alert('Hello javascript');
    }

    // box.removeChild(btn);     不会发生内存泄漏，绑定事件随之消除
    box.innerHTML = "";          // 发生内存泄漏，事件不消除，仍然存在
</script>