额，今天看了vue1.0关于模板渲染的知识，认识了DocumentFragment这个东西，它相当于一个节点容器，我们对他使用appendChild时，只有它的子节点会被插入进去，它本身不会插入进去，并且使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。
好吧，在别人的文章中看到了一段用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="b"></span>
<input type="text" id="a">
</div>
<script>
function nodeToFragment(node){
var flag=document.createDocumentFragment();
var child;
while(child=node.firstChild){
flag.append(child);
}
return flag;
}
var dom=nodeToFragment(document.getElementById('app'));
console.log(dom);
</script>
</body>
</html>
1.这里面开始不懂的是while循环里面每次一直把firstChild赋值给child，按照我的理解不是每次都是一样的么，又没有对node删除节点，经过自己实践，发现，flag.append这个方法会让被插入的child节点从父节点中移除，这个挺神奇的啊。
不过这个append方法经过查询是实验中的方法，MDN说的，之前见到过jquery的这个方法。