【JavaScript】appendChild一个的注意点之会删除原dom树节点_缝合怪的博客

首先看一下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;amp;quot;lucky&amp;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);
希望这对你有帮助！