Node对象的appendChild和append方法

这里主要就目前本人了解到的关于appendChild和append方法阐述的一点点理解。这两个方法都是在父节点的末尾添加子节点。

1. appendChild()

 	var childNode = parentNode.appendChild(childNode)

该方法的参数是一个Node对象,返回值依然是该Node对象（参数中的childNode和返回值childNode指向同一个Node对象）

• 插入一个新的node节点：
  HTML代码

 <div id="container1">
     <h1>标题1</h1>
     <p>段落1</p>
 </div>

JS代码

var container1 = document.querySelector('#container1')
var p2 = document.createElement('p')
p2.textContent = '段落2'
var p22 = container1.appendChild(p2)
console.log(p2 === p22) //true

页面显示结果

• 插入页面中原有的node节点:
  HTML代码

<div id="container1">
 <h1>标题1</h1>
 <p>段落1</p>
</div>
<div id="container2"></div>

JS代码

 var p1 = document.querySelector('p')
 var container2 = document.querySelector('#container2')
 var p1 = container2.appendChild(p1)

页面显示结果

因此，如果想要将页面中原有的节点插入到另外一个地方，节点会先从原位置移除，然后再插入到新位置。如果想要在原位置保留该节点，则需要先进行cloneNode，创建待插入节点的副本，然后再进行插入操作。
JS代码

var p1 = document.querySelector('p')
var p11 = p1.cloneNode(true) //cloneNode参数设置成true，表示连同子节点一起克隆，如果设置成false,则只有p元素会被克隆
var container2 = document.querySelector('#container2')
var p11 = container2.appendChild(p11)
console.log(p1 === p11) //false

页面显示结果

2. append()
MDN中说该方法还是一个实验中的方法，因此使用时可能存在兼容性问题，特别是IE浏览器（IE11不支持append方法），需要进行Polyfill。append方法也是既可以插入新节点或者文档中原有的节点，这一点和appendChild方法一样。append方法与上述的appendChild方法主要存在以下3个区别：

• append方法的参数可以是一组Node对象或者DOMString对象（这里可以简单理解成String对象），而appendChild方法的参数只能是一个Node对象。

var container2 = document.querySelector('#container2')
container2.append('text') //成功在容器container2中插入textContent为‘text’的文本节点
var text1 = container2.appendChild('text') //报错

以上代码中使用appendChild插入一个文本节点报以下错误：

• append方法没有返回值
• append方法可以同时插入几个子节点（包括字符串），而appendChild一次只可以插入一个子节点

  container2.append(p11, 'haha')
  var haha1 = container2.appendChild(p11, 'haha') //只会添加p11,字符串’haha‘被忽略

目前如果想在IE9+中使用append方法，需加入Polyfill