SOURCE

//创建文档碎片对象
const fragment = document.createDocumentFragment()
//获取div容器,并找到里面所有的子节点
const divobj = document.getElementById('demo')
const childNodes = divobj.childNodes

//遍历子节点，全部扔进碎片对象中(文档碎片对象存在于内存中)
while (child = divobj.firstChild) { // 或者 childNodes.length > 0
    fragment.appendChild(child)
    console.log(childNodes.length, 'length')
    // fragment.appendChild(child)
}

//遍历碎片对象中的所有的子节点,修改数据
fragment.childNodes.forEach(child => {
    child.innerHTML = '哈哈'
})

//把碎片对象扔进div容器中
divobj.appendChild(fragment)

 <div id="demo">
    <p>测试1</p>
    <p>测试1</p>
    <p>测试1</p>
    <p>测试1</p>
</div>