createElement与createDocumentFragment的点点区别小结


Posted in Javascript onDecember 19, 2011

网上可以搜到的大部分都是说使用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>
Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
详解Python文本操作相关模块
2017/06/22 Python
python 实现dict转json并保存文件
2019/12/05 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
explicit和implicit的含义
2012/11/15 面试题
旅游安全协议书
2014/04/21 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2014年标准化工作总结
2014/12/17 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
docker 制作mysql镜像并自动安装
2022/05/20 Servers