可以提取頁面上的節點，進行編輯操作。
- 一次性提取需要的節點，處理后重新插入回去，減少頁面重繪
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')
// ?。∽⒁馓崛omeChild，app里就不存在了
fragment.appendChild(someChild)
// 修改內容
fragment.childNodes[0].textContent = '修改后在插入app'
// 重新插入到app 中
//fragment 可以全部插入，也可以選擇部分fragment.childNodes[0]
//插入后后的節點，fragment里便不存在了
app.appendChild(fragment)
</script>
