createElement与createDocumentFragment的点点区别小结资源-CSDN文库

create

5 浏览量 2020-12-08 22:51:47 上传评论收藏 47KB PDF 举报

资源推荐

资源详情

资源评论

createElement与与createDocumentFragment的点点区别小结的点点区别小结

网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起

的效率问题，比如：

代码如下:

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=[“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的第一个例子，并不代表对原作者有任何意见，原文地址

http://www.cnitblog.com/asfman/articles/32614.html）

这个说法并没有错，但是并不严谨，因为像这种用法，主要还是用在目标节点是已存在并且有一部分内容的情况下，比如上面

例子中的body元素，如果目标节点并不存在或者为空，完全可以用createElement创建一个相同的元素，操作之后再使用一次

appendChild或者replaceChild来达到相同的目的，这样也不存在重复刷新的问题。

虽说我平时都是把两者混着用，但是还是得明白两者之间的一点区别：

第一：

createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文

档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有

对应的标记，因此在页面上只能用js中访问到。

demo：

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

#outer{ height: 200px; border: 1px solid #006400;}

</style>

</head>

<body>

</div>

<input type=”button” value=”createElement” id=”btn_1″/><input type=”button” value=”createDocumentFragment”

id=”btn_2″/>

var fragment_1 = document.createDocumentFragment();

fragment_1.innerHTML = ‘<p>我是一个粉刷匠</p>’;

document.body.appendChild(fragment_1);

var fragment_2 = document.createElement(‘p’);

fragment_2.innerHTML = ‘粉刷本领强’;

document.body.appendChild(fragment_2);

</script>

</body>

</html>

第二：另一个最主要的区别就是createElement创建的元素可以重复操作，添加之后就算从文档里面移除依旧归文档所有，可

以继续操作，但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了（说明：这里的添加并不是添

加了新创建的片段，因为上面说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。

一个对比的例子：

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38621630

粉丝: 3
资源: 914

createElement与createDocumentFragment的点点区别小结

03_createElement写法.html

js 用CreateElement动态创建标签示例

javascript中createElement的两种创建方式.docx

JS写图层方法.document.createElement(div).htm

浅析document.createDocumentFragment()与js效率

document.createElement()用法

稍微好一点的document.createElement-JavaScript开发

Vue中fragment.js使用方法小结

JavaScript：createElement和insertBefore

docrel更好用的documentcreateElement方法

javascript中createElement的两种创建方式

使用jQuery解决IE与FireFox下createElement方法的差异

浅谈javascript中createElement事件

getElementByID、createElement、appendChild几个DHTML元素第1/2页

leslie1943#blog#React-JSX和React.createElement1

document.createElement(&quot;A&quot;)比较不错的属性

并行程序设计导论课后答案_2.7z

加速度积分求速度和位移的c语言算法程序

数据结构课设用C、C++写旅游区景点导游系统头文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

DeepLearning之LSTM模型输入参数：time_step, input_size, batch_size的理解

Vulkan编程指南.pdf

python自动化办公——python操作Excel、Word、PDF集合大全

C#40000字全套精华教程！！！从入门到精通，一篇就够了！！！

C++并发编程实战（全书和源码）.zip

stm32f103c8t6驱动ADS1256程序已经验证

Qt移植：Ubuntu18.04 交叉编译qt5.12.7详细教程配置编译qt-everywhere-src-5.12.7

STM32音频采集播放.....zip

编译供c语言使用的Vosk库，可以直接使用省去编译的麻烦过程

最新资源

document.createElement("A")比较不错的属性