向当前#list的最后元素之后添加100个新的li节点,合理且安全的操作方式是?
通过循环方式创建新的li节点,并依次添加到#list中
先将#list节点的display设置为none,通过循环方式创建新的li节点,并依次添加到#list中,最后再将#list节点的display设置为block
取出#list中现有的li节点的html,将它与新增的li节点对应的html代码拼接成字符串,一次性插入到#list中
创建Fragment,通过循环方式创建新的li节点,添加到Fragment中,最后再将Fragment添加到#list中
css样式部分
li{
height: 50px;
width: 50px;
background-color: #e0e0e0;
}
html结构部分
<ul id="list">
<li>1</li>
<li>2</li>
<ul>
js部分 //通过循环方式穿件新的li节点并依次添加到#list中
// var d1 = +new Date();
// var list=document.getElementById("list")
// // 获得未插入代码块前的时间戳
// for (var i = 0; i < 10000; i++) {
// var li = document.createElement('li');
// list.appendChild(li);
// }
// var d2 = +new Date();
// // 获得运行完毕的时间戳
// console.log("通过循环方式穿件新的li节点并依次添加到#list中所花费的时间",d2 - d1);
// //共计消耗多长时间 9~14ms
// 先将#list节点的display设置为none,通过循环方式创建新的li节点,并依次添加到#list中,
// 最后再将#list节点的display设置为block
// var d1 = +new Date();
// //获取未执行时的时间戳
// var list=document.getElementById("list")
// list.style.display="none"
// for (var i = 0; i < 10000; i++) {
// var li = document.createElement('li');
// list.appendChild(li);
// }
// list.style.display="block"
// var d2 = +new Date();
// // 获得运行完毕的时间戳
// console.log("通过循环方式穿件新的li节点并依次添加到#list中所花费的时间",d2 - d1);
// //共计消耗多长时间 10~24ms
// //取出#list中现有的li节点的html,将它与新增的li节点对应的html代码拼接成字符串,一次性插入到#list中
// var d1 = +new Date();
// var list=document.getElementById("list")
// for (var i = 0; i < 10000; i++) {
// list.innerHTML += '<li></li>';
// }
// var d2 = +new Date();
// console.log(d2 - d1);
// //卡死了 emmm
// 创建Fragment,通过循环方式创建新的li节点,添加到Fragment中,最后再将Fragment添加到#list中
//创建文档片段
var d1 = +new Date();
var list=document.getElementById("list")
var d=document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {
var li = document.createElement('li');
d.appendChild(li)
}
list.appendChild(d)
var d2 = +new Date();
console.log(d2 - d1);
//共计消耗多长时间 11~26ms
我反正是打了一下代码去查了下文档
createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。
估计是因为createDocumentFragment() 方法可以更安全改变文档的结构及节点。所以答案才会是D吧