DOM节点的复制添加

需求：获取原DOM列表中的某个节点复制重新添加进该列表

问题

如果直接添加，只会对获取的节点进行移动，而不是添加

• 利用appendChild()
  1,2,3,4 ===> 获取2节点再添加就成了 1,3,4,2；
  而不是想要的1,2,3,4,5,2;

解决方法

1. createElement()重新创建一个新的节点，并进行设置；
2. cloneNode(boolean) 实现节点复制后添加
   createElement的话就没有cloneNode一样那么直接去复制，而是一步一步的创造，所以主要讲的是cloneNode方法。

• cloneNode方法
  有一个参数（布尔值）
  当false时 会复制节点以及其后代节点
  为true时 连节点的属性也会一起复制

// html 
<div class="parsent">
    <a href="" class="child">1</a>
    <a href="" class="child">2</a>
    <a href="" class="child">3</a>
</div>
// js
var parsent = document.getElementsByClassName('parsent')[0]
var secondChild = parsent.querySelectorAll('a')[1]
var copyChild = secondChild.childNode(true)
parsent.appendChild(copyChild)

添加后的html

<div class="parsent">
    <a href="" class="child">1</a>
    <a href="" class="child">2</a>
    <a href="" class="child">3</a>
    <a href="" class="child">2</a>
</div>

如果直接用一个新变量来储存抽离出来的DOM节点，这样做是没用的，结果会是如下

// js
var parsent = document.getElementsByClassName('parsent')[0]
var secondChild = parsent.querySelectorAll('a')[1]
var copyChild = secondChild
parsent.appendChild(copyChild)
// html
<div class="parsent">
    <a href="" class="child">1</a>
    <a href="" class="child">3</a>
    <a href="" class="child">2</a>  <!--只进行了移动-->
</div>