关于innerHTML以及html2dom
使用innerHTML或者insertAdjacentHTML 创建元素的时候能给我们带来很大的方便，为domNode 赋予innerHTML 属性，在插入大量的ＨＴＭＬ的时候，使用innerHTML要比多次创建ｄｏｍ效率高的多，这是因为在设置innerHTML 时候，浏览器会创建一个innerHTML解析器，这个解析器是在浏览器级别的代码（通常是C++编写的）基础上运行的，因此执行要比Javascript快得多。
不可避免地，创建和销毁HTML解析器也会带来性能的损失，因而应该将设置innerHTML的次数要尽量少，避免浏览器多次的创建HTML解析器，另外如果innerHTML有用户输入或者来自第三方网站，容易造成脚本的攻击，比如包含<script>的代码。同时如果使用这种方式创建的元素 之后又为之绑定了事件应先移除事件，如果要移除这段HTML的时候，应该先移除事件避免内存泄露。当然在创建的时候自己可以过滤是否包含攻击性的脚本，得到一个无害的文本。安全的创建节点的方式如下
首先在内存中创建一个文档片段，然后将要创建的元素添加到这个片段中，最后将片段添加到相应的位置即可
var docFragment = document.createDocumentFragment();
var greeting = document.createElement('P'); greeting.setAttribute("id", "greeting"); docFragment.appendChild(greeting); var text = document.createTextNode("Hello "); greeting.appendChild(text); var b = document.createElement('B'); greeting.appendChild(b); var text_0 = document.createTextNode("World"); b.appendChild(text_0);
对于以上的方式 感觉这么多行代码有些麻烦，我们可以使用一个开源的html2dom 来实现HTML与Dom之间的转换。将HTML 生成如上的创建dom的javascript代码。通过这种的方式浏览器不会启用HTML解析器来解析一个长的字符串，也许会提高网站的性能。
如下两种使用方式
假设我想添加 <p id="greeting">Hello <b>World</b></p> 这段HTML到文档上，可以使用
var h2d = html2dom.parse('<p id="greeting">Hello <b>World</b></p>'); console.log(h2d);
会得到如下 ：
var docFragment = document.createDocumentFragment(); // contains all gathered nodes
var greeting = document.createElement('P'); greeting.setAttribute("id", "greeting"); docFragment.appendChild(greeting); var text = document.createTextNode("Hello "); greeting.appendChild(text); var b = document.createElement('B'); greeting.appendChild(b); var text_0 = document.createTextNode("World"); b.appendChild(text_0);
可以看出，html2dom.parse将创建HTML实际上是通过javascript 创建dom来完成的。与第一个Demo的代码一致，只是html2dom将这个过程进行了封装。
如果想了解，javascript代码创建的是什么样的HTML 可以使用html2dom.dom2html
var inp = '<p id="greeting">Hello <b>World</b></p>'; var js = html2dom.parse(inp); html2dom.dom2html(js, function callback(res) { console.log("Input:", inp); console.log("Result:", res); });
结果
Input: <p id="greeting">Hello <b>World</b></p>
Result: <p id="greeting">Hello <b>World</b></p>