关于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>