createElement与createDocumentFragment的一些小区别
在DOM操作里,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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#outer{ height: 200px; border: 1px solid #006400;}
</style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#outer{ height: 200px; border: 1px solid #006400;}
</style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var outer = $('outer');
var inner = $('inner');
$('btn_1').onclick = function(){
var div = document.createElement('div');
div.innerHTML = '<p>测试createElement</p>';
document.body.appendChild(div);
setTimeout(function(){
outer.appendChild(div);
setTimeout(function(){
outer.removeChild(div);
},1000)
},1000)
}
$('btn_2').onclick = function(){
var p = document.createElement('p');
p.innerHTML = '测试DocumentFragment';
var fragment = document.createDocumentFragment();
fragment.appendChild(p);
fragment.innerHTML = '<p>测试DocumentFragment</p>';
fragment.innerHTML = '<span>测试DocumentFragment</span>';
document.body.appendChild(fragment);
setTimeout(function(){
outer.appendChild(fragment);//报错,因为此时文档内部已经能够不存在fragment了
setTimeout(function(){
outer.removeChild(fragment);
},1000)
},1000)
}
</script>
</body>
</html>
本文转载自小西山子【http://www.cnblogs.com/xesam/】
本文地址:http://www.cnblogs.com/xesam/archive/2011/12/19/2293876.html
createElement与createDocumentFragment的一些小区别的更多相关文章
- C#中四步轻松使用log4net记录本地日志(WPF有点小区别)
在这里,记录我在项目中使用log4net记录本地日志的步骤.在不会之前感觉很难,很神秘,一旦会了之后其实没那么难.其实所有的事情都是一样的,下面我就分享一下我使用log4Net的经验. 第一步:首先从 ...
- safari 与 chrome 的小区别大BUG
safari 与 chrome 的小区别大BUG 时间:2016-11-01 17:33:19 作者:zhongxia 原文地址:https://github.com/zhongxia245/blog ...
- createElement与createDocumentFragment的点点区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- python和ruby:一些需要注意的小区别。
python和ruby的一些区别 基础区别 运算符号/和// ruby只有/符号.它根据操作的数字类型返回对应的结果.如果数字的类型是int,则返回整除结构,如果是float,则返回float类型的计 ...
- vue和mvvm的一些小区别
Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...
- python之路day06--python2/3小区别,小数据池的概念,编码的进阶str转为bytes类型,编码和解码
python2#print() print'abc'#range() xrange()生成器#raw_input() python3# print('abc')# range()# input() = ...
- $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法
$(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...
- System.Collections空间下的Hashtable类与System.Collections.Specialized下的StringDictionary的一点小区别
哎.有一周没有写自己的博客. 最近在做一个调用web服务的小程序,没有使用c#自动生成的代理类,而是使用http-get.post.以及soap的方式去请求的,使用这http请求这种方式需要自己去拼参 ...
- C#中 DateTime , DateTime2 ,DateTimeOffset 之间的小区别 (转载)
闲来无事列了个表比对一下这3兄弟之间还是有一点差距的╮(╯_╰)╭ DateTime DateTime2 DateTimeOffset 日期范围 1753-01-01到 9999-12-31 00 ...
随机推荐
- Vue列表动画----自己做的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Shodan全世界在线设备搜索引擎
reproduction from https://danielmiessler.com/study/shodan/ What is Shodan? Shodan is a search engine ...
- JAVA 查找某个目录是否存在,如果存在,打印出来
题目:现有如下目录结构,查找结构中是否存在Directory11,如果存在,打印出来 |---test |---|---Directory1 |---|---|---Directory11 |---| ...
- 运维开发笔记整理-JsonResponse对象
运维开发笔记整理-JsonResponse对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用HttpResponse发送json格式的数据 1>.HttpRespo ...
- Jenkins企业应用
一,CI/CD,DevOps介绍 持续集成(Continuous Integration,CI): 代码合并,构建,部署,测试都在一起,不断地执行这个过程,并对结果反馈 持续交付(Continuous ...
- <<构建之法>>--第二次作业
GIT地址 https://github.com/Panghu98/AchaoCalculator.git GIT用户名 Panghu98 学号后五位 62632 博客地址 https://www.c ...
- 小程序数据绑定和setData
我们wxml没有直接调用数据的能力,我们的逻辑是通过js调用数据,再由js传递给wxml才能够显示出来.那么怎么由js传递给wxml? 首先我的js里面有这样一段代码 process: funct ...
- 【转】Senior Data Structure · 浅谈线段树(Segment Tree)
本文章转自洛谷 原作者: _皎月半洒花 一.简介线段树 ps: _此处以询问区间和为例.实际上线段树可以处理很多符合结合律的操作.(比如说加法,a[1]+a[2]+a[3]+a[4]=(a[1]+a[ ...
- 云计算(5)---MapReduce
什么是MapReduce 例如用MapReduce如何计算12+22+32+42 用MapReduce执行Wordcount 步骤1:Map map task1 和map task2是独立,并行进行 ...
- 关于Mybatis查询结果的封装
1.结果封装为List<Object> 接口示例: public List<Members> selectMembersListByName(String name); 配置文 ...