针对于当前节点的操作,比如新增一个节点并且新增完成以后,后续可能还有很多属性以及相应方法的添加。这里还是以节点的新增配合克隆来完成优化的操作行为,
<html>
<body>
<p id="box1">old</p>
<script>
for (var i = 0; i < 10; i++) {
var oP = document.createElement('p')
oP.innerHTML = i
document.body.appendChild(oP)
}
// 克隆 + 文档碎片化方式
const oldP = document.getElementById('box1')
const fragEle = document.createDocumentFragment()
for (var i = 0; i < 10; i++) {
var newP = oldP.cloneNode(flase);
newP.innerHTML = i fragEle.appendChild(newP) }
document.body.appendChild(fragEle)
</script>
</body>
</html>