WilsonLiu’s blog 首发地点
二者天生dom的体式格局有什么好坏呢？
起首让我们看一个小题目再引入正题～
怎样重复插进去一个雷同的html构造呢？
//毛病的
window.onload = function(){
var el = document.createElement('div');
el.appendChild(document.createTextNode('Hi'));
for (var i = 10; i > 0; --i)
document.body.appendChild(el);
}; //统一元素没法重复插进去，//正确的 同时注重不要设置插进去屡次的元素的id,不然形成毛病
window.onload = function(){
var el = document.createElement('div');
el.appendChild(document.createTextNode('Hi'));
for (var i = 10; i > 0; --i)
document.body.appendChild(el.cloneNode(true));
};上述之所以要用clone，是由于当时我的需求是克隆一个庞杂的html构造，而并不是天生一个简朴的dom元素。
重排与重绘
上述要领，虽然可以胜利天生雷同的dom元素，然则机能上是存在题目的。
每次插进去dom元素到body后，dom树会重排，以后页面会由于新的dom元素的插进去而从新绘制，这两个历程是极为耗时的。
因而，引荐运用文档碎片document.createDocumentFragment()。
运用要领
//应用文档碎片 进步机能 frag相当于一个容器 frag并不会插进去body而是把frag的内部元素悉数插进去body
window.onload = function(){
var frag = document.createDocumentFragment();
var el = document.createElement('div');
el.appendChild(document.createTextNode('Hi'));
for (var i = 10; i > 0; --i)
frag.appendChild(el.cloneNode(true)); //先将天生的dom悉数插进去frag先，这个历程并不会触发重排与重绘
};
document.body.appendChild(frag); //将天生的frag插进去body中，将10此重排重绘的历程紧缩为一次接下来，进入正题的比较
innerHTML vs createElement
天生Dom的两种体式格局，孰优孰劣呢？
就我们的履历看来，innerHTML这类采纳字符串拼接天生dom的体式格局好像越发轻易，而且效力更高。然则那原生的createElement又有什么上风呢？
以下，上风看法来自于stack overflow的谈吐，翻译的也不一点正确，迎接讨论。
createElement，当元素插进去后依然保存对dom元素的指针。而innerHTML插进去后，并没有对dom元素的指针，你须要再经由过程getElementById从新拔取。
createElement可以取得事宜处置惩罚函数，而innerHTML天生的新dom没法取得本来设置的事宜处置惩罚函数。
某些情况下，createElement越发疾速。假如你须要重复操纵字符串，在每次处置惩罚后再次插进去。每次插进去都将举行剖析与制造dom，在机能上会很差。
可读性与可保护上createElement会优异一些
下面供应一段封装好了的让你轻易的运用createElement的函数
function isArray(a) {
return Object.prototype.toString.call(a) === "[object Array]";
}
function make(desc) {
if (!isArray(desc)) {
return make.call(this, Array.prototype.slice.call(arguments));
}
var name = desc[0];
var attributes = desc[1];
var el = document.createElement(name);
var start = 1;
if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
for (var attr in attributes) {
el[attr] = attributes[attr];
}
start = 2;
}
for (var i = start; i < desc.length; i++) {
if (isArray(desc[i])) {
el.appendChild(make(desc[i]));
}
else {
el.appendChild(document.createTextNode(desc[i]));
}
}
return el;
}
运用体式格局
make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);
你会获得如许一个html构造
<p>Here is a <a href="http://www.google.com/">link</a>.</p>
综上，二者各有各的优点。无疑，在大多数情况下，innerHTML更加疾速且越发易用，然则运用innerHTML的时刻警惕上述的那个题目就好。
