最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。
--------------------------------------------------------------------------------------------------------------------------------
首先看一下MDN上对appendChild的定义：
Node.appendChild()
方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么
appendChild()
只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。
这意味着，
一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。
若要保留已在文档中的节点，可以先使用
Node.cloneNode()
方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用
cloneNode
制作的副本不会自动保持同步。
这下好了，就是appendChild在其中发挥了作用：
使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原dom树的节点。
----------------------------------------------------------------------------------------------------------------------------------
下面看个例子：
<div id='container'>
title
<p>content</p>
（1）此时不对container作任何dom操作，同时打印一下container的childNodes（此时NodeList(0)为text-title，页面将看到的是：
（2）然后写段js代码，将container的firstchild使用appendchild方法添加到DocumentFragment
<script>
var container = document.getElementById('container')
var frag = document.createDocumentFragment();
frag.appendChild(container.firstChild)
</script>
（3）最后打印一下container的childNodes同时看看页面渲染结果：
（4）最后呈现出来的结果就是被我用appendchild方法操作的节点（类型：text，内容："title"）在原dom树中被删除了。
最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。首先看一下MDN上对appendChild的定义：Node.appendChild()方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么appendChild(...
本文实例讲述了javascript使用appendChild追加节点的方法。分享给大家供大家参考。具体分析如下：
DOM树节点的增加，实例代码如下：
代码如下:<html>
[removed]
function t(){
var nodep = document.createElement(‘p’);//创建p节点
var art = document.createTextNode(‘你好，世界’);//创建文本节点
var cont = document.getElementById(‘container’);//获取节点
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
cons...
1.对于htmlElement对象，appendChild与insertBefore都会删除原有的节点，然后再增加该节点到指定的位置。实际上是一种【移动】节点的操作。不需要显示removeChild再appendChild。表格按列排序中我们会经常是用到。
2.对于htmlElement对象，所有的属性都是实时性的。上次的随笔中提到的property与attribuite的区别，实际上...
var para=document.createElement('p');//创建新的p标签
var node=document.createTextNode('这是一个段落');//创建一个文本节点
para.appendChild(node);//向p追加此文本节点
para.className=&amp;amp;quot;lucky&amp;amp;quot;;//向...
在Javascript中，只提供了一种删除节点的方法：removeChild()。removeChild() 方法用来删除父节点的一个子节点。
parent.removeChild(thisNode)
参数说明：
thisNode
当前节点，即要删除的节点
parent
当前节点的父节点，即 thisNode.parentNo...
这将创建一个绿色的圆形代表圣诞树的主体，黄色的圆形代表星星，棕色的方形代表树干。
你也可以使用 JavaScript 动态地更改圣诞树的外观，比如添加圣诞装饰品或者改变颜色。例如，可以使用 JavaScript 在圣诞树上添加红色的圆形装饰品：
const tree = document.getElementById("tree");
const ornament = document.createElement("div");
ornament.style.height = "10px";
ornament.style.width = "10px";
ornament.style.background = "red";
ornament.style.borderRadius = "50%";
ornament.style.position = "absolute";
ornament.style.top = "30px";
ornament.style.left = "30px";
tree.appendChild(ornament);
希望这对你有帮助！
