createElement与createDocumentFragment的点点区别小结

网络能够搜到的超越四分之一都是说接纳createDocumentFragment重即便因为防止因createElement数次加上到document.body引起的效能难点,举例: 复制代码 代码如下: var arrText=["1","2","3","4","5","6","7","8","9","10"]; for(var i=0;i复制代码 代码如下:

网络能够搜到的超多都是说采取createDocumentFragment主若是因为制止因createElement多次加上到document.body引起的成效难点,举例:

其次:另一个最首要的区分就是createElement成立的成分得以重新操作,增添之后正是从文书档案里面移除如故归文书档案全数,能够世袭操作,可是createDocumentFragment成立的要素是一遍性的,增加之后再就不可能操作了(表明:这里的丰盛并非增多了新创立的后生可畏对,因为上边说过,新创制的一些在文书档案内是未有对号入座的竹签的,这里充分的是部分的全体子节点)。 三个对照的例子: 复制代码 代码如下:

复制代码 代码如下:

var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++){
var op=document.createElement("P");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
var arrText=[createElement与createDocumentFragment的点点区别小结。"1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
var op=document.createElement("P");
真钱捕鱼 ,var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);

(注明:那是自家google的率先个例子,并不代表对原来的文章者有任何意见,原著地址
其一说法并从未错,可是并不谨严,因为像这种用法,首要如故用在指标节点是已存在而且有生机勃勃对内容的事态下,比如下面例子中的body元素,假使指标节点并一纸空文或许为空,完全能够用createElement创造一个后生可畏致的元素,操作之后再使用贰遍appendChild大概replaceChild来达到同等的目标,那样也不设有双重刷新的难题。
即使如此小编平常都以把双边混着用,不过依然得掌握两个之间的一点分别:
第一:
createElement成立的要素得以动用innerHTML,createDocumentFragment创设的成分运用innerHTML并无法达到规定的标准预期改良文书档案内容的据守,只是充任三性格质而已。两个的节点类型完全两样,何况createDocumentFragment创设的因素在文书档案中向来不对应的符号,由此在页面上一定要用js中做客到。
demo:

复制代码 代码如下:

返回列表