JavaScript中，文档碎片独立于DOM树之外，存在于内存中，创建一个空白的文档片段，可以使用createDocumentFragment来创建：
<script type="text/javascript"> var fragment = document.createDocumentFragment(); //创建一个空的文档片段(可用于做长裤仓库) </script>
对文档片段的操作，可以插入、删除节点 和 API都和其他DOM元素相同，但是也存在一些不同：
当你将文档树中的节点添加到文档片段中后，就会从文档树中移除该节点，浏览器也不显示这个节点了。文档树就没这个节点了 相当于移动(剪切)
可以通过appendChild方法或者 insertBefore方法将文档片段中的内容添加到文档树中，反之也可以。
文档片段永远不属于文档树的一部分.
为什么说是DOM优化呢 因为这样做在某种程度上啊(自己去研究) 可以提高效率
来串代码把你整的明明白白！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>永远的学生</p>
<a href="">永远的学生</a>
</div>
<script type="text/javascript">
var fragment = document.createDocumentFragment(); //创建一个空的文档片段(可用于做长裤仓库)
var p_node = document.getElementsByTagName(‘p‘)[0]; //获取到p标签节点
fragment.appendChild(p_node); //将p加入到append中 你会发现 标签不显示了
/*------------吧节点放出来-----------*/
document.body.appendChild(fragment.children[0]); //把它搞回去去 你会发现又出现了 在a标签后面
</script>
</body>
</html>
By: Bi - Hu
JavaScript DOM优化 - 文档碎片（片段）的使用
原文：https://www.cnblogs.com/bi-hu/p/14775673.html