文档片段createDocumentFragment、appendChild

可以提取页面上的节点，进行编辑操作。

• 一次性提取需要的节点，处理后重新插入回去，减少页面重绘

let fragment = document.createDocumentFragment()
fragment 是一个指向空[DocumentFragment]对象的引用。
("DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。")

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

<div id="app">
  <p id="childNode">hello</p>
</div>
<script>
let fragment = document.createDocumentFragment()
let someChild = document.querySelector('#childNode')
let app = document.querySelector('#app')

// ！！注意提取someChild，app里就不存在了
fragment.appendChild(someChild) 

 // 修改内容
fragment.childNodes[0].textContent  = '修改后在插入app'

// 重新插入到app 中
//fragment 可以全部插入，也可以选择部分fragment.childNodes[0]
//插入后后的节点，fragment里便不存在了
app.appendChild(fragment)

</script>