今晚在使用到这结点添加也就随笔写写，看调用多次document.body.appendChild(),每次都要刷新页面一次。效率也就大打折扣了，也正使用document.createDocumentFragment()创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可。
如：
<html>
<head>
<title>createElement</title>
<script type="text/javascript">
function createMessage()
{ var oP=document.createElement("p");
var oText=document.createTextNode("Hello World");
oP.appendChild(oText);
document.body.appendChild(oP);
var arrText=["first","second","third","fourth"];
var oFragment=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++)
{
var oP=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="createMessage()">
<div id="div1">createMessage</div>
</body>
</html>
分享到：
相关推荐
网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...
讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。
documentFragment 是一個無父對象的document對象.
对于循环批量操作页面的DOM有很大帮助！利用文档碎片处理，然后一次性append，并且使用原生的javascript语句操作
代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement(‘div’), frag = document.createDocumentFragment(); temp[removed] = HTML;//要加入的内容先放到这里。 (function(){ ...
createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办，比如说一次插入 10000 个节点？ 最简单粗暴的方式就是： var parent = document.getElementById(`'parent'`); for`(`var i = 0; i < 10000...
初识createDocumentFragment Promise原理与实现探究的一种思路 Tip Content-Security-Policy的理解 初识createDocumentFragment Vue2的独立构建与运行时构建的差别 JavaScript的异步性和队列问题 CommonJS模块化规范...
节点集合 by 司徒正美 #aaa { padding:10px; border:1px solid red;... 代码如下: [removed] = function(){ var d = document.createDocumentFragment(); var div = document.getElementById(“aaa”); var c
但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css.... }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.createTextNode(c)); Sty.appendChild(Frag); } document.get
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() ...
后来是一技术群问到以下一段代码： 代码... var df = document.createDocumentFragment(); while (d.firstChild) df.appendChild(d.firstChild); return df; } 大概的原理都明白，比较困惑的是为什么要用 document.cre
2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听 3.使用MutationObserver监听列表的DOM添加, 添加完毕后, ...
createDocumentFragment ( ) ; var text1 = document . createTextNode ( "hello" ) ; var text2 = document . createTextNode ( " world" ) ; fragment . appendChild ( text1 ) ; fragment . appendChild
createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办，比如说一次插入 10000 个节点？ 最简单粗暴的方式就是： var parent = document.getElementById('parent'); for(var i = 0; i < 10000; i+...
块 将较大的阻塞循环分解为较小的块，这些块会阻塞一段指定的时间 创建此表的原因是由于呈现了... createDocumentFragment ( ) ; // Start a console timer console . time ( 'total' ) ; blocks . forEach ( data ,
PixelArtMaker 开发一个单页Web应用程序，使用户可以... PS：document.createDocumentFragment（）可用于有效创建表。 这将防止在每次添加td或tr时对文档进行重排和重绘。 文档片段在内存中，而不是主dom树的一部分。