彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 05:45 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

createElement与createDocumentFragment的点点差距小结彩世

英特网能够搜到的大多都以说利用createDocumentFragment重假如因为避免因createElement数11回加上到document.body引起的效用难点,举例: 复制代码 代码如下: var arrText=["1","2","3","4","5","6","7","8","9","10"]; for(var i=0;i复制代码 代码如下:

复制代码 代码如下:

第二:另三个最重大的界别正是createElement成立的因素得以重新操作,加多之后正是从文书档案里面移除依然归文书档案全体,能够持续操作,但是createDocumentFragment创造的元素是二次性的,增多之后再就不能够操作了(表明:这里的充足实际不是加多了新创制的生机勃勃部分,因为地点说过,新创设的后生可畏对在文书档案内是没有对症用药的竹签的,这里足够的是有个别的全体子节点卡塔 尔(阿拉伯语:قطر‎。 八个对待的例证: 复制代码 代码如下:

其次:另一个最要害的分别正是createElement创制的要素得以另行操作,增加之后便是从文书档案里面移除依然归文书档案全数,能够继续操作,可是createDocumentFragment成立的因素是二回性的,增加之后再就不能够操作了(表明:这里的增加并不是加多了新成立的局地,因为上面说过,新成立的风华正茂部分在文书档案内是未有相应的标签的,这里充裕的是有个别的全部子节点卡塔 尔(英语:State of Qatar)。
二个相比的例子:

复制代码 代码...

(申明:那是自个儿google的率先个例证,并不代表对原来的著小编有别的意见,原来的书文地址
其一说法并不曾错,然而并不严谨,因为像这种用法,首要依旧用在对象节点是已存在况且有黄金年代对内容的情景下,譬喻上边例子中的body成分,借使目的节点并不设有或然为空,完全能够用createElement创制二个均等的成分,操作之后再利用二遍appendChild只怕replaceChild来完结平等的指标,那样也不设有重新刷新的标题。
虽说作者平常都以把相互混着用,可是照旧得精通两个之间的一点分别:
第一:
createElement创制的因素得以应用innerHTML,createDocumentFragment创立的成分接受innerHTML并不可能达到规定的规范预期修正文书档案内容的效果与利益,只是作为叁个天性而已。两个的节点类型完全两样,并且createDocumentFragment成立的元素在文书档案中一贯不相应的标识,因而在页面上必须要用js中做客到。
demo:

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);

网络能够搜到的大部都以说选择createDocumentFragment首假使因为防止因createElement多次丰硕到document.body引起的功效难题,比方:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
";
<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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
";
<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>

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:createElement与createDocumentFragment的点点差距小结彩世

关键词: 脚本 小结 区别 之家