原生js中Node.appendChild() 方法

问题

最近一个页面中用到appendChild来追加内容，此时发现当多次添加相同的li标签时，页面上却只出现了一个li标签。

<ul id="mylist"></ul>
<script>
  const mylist = document.getElementById('mylist');
  const li = document.createElement("li");  //创建li标签
  li.innerHTML = 'item';
  for(var i = 0;i < 3;i++) {
    mylist.appendChild(li);   //多次添加li到ul中
  }
</script>

结果如图：

添加3次li后，页面中只出现了1个li，之后查阅了资料，主要还是源于没有理解透彻。

原因

查阅 MDN文档中Node.appendChild()方法
源文档：

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.
If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).
This means that a node can't be in two points of the document simultaneously.
So if the node already has a parent, the node is first removed, then appended at the new position.

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。
如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。
这意味着，一个节点不可能同时出现在文档的不同位置。
所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。

这就很清楚的解释了最初描述的问题原因，那如果我们希望追加多个相同的元素到父元素应该怎么办呢？
其实 MDN的Node.appendChild()方法 在附注中已经给了我们答案：

如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置。

那么我们来试一试吧。

解决

1.Node.cloneNode()

MDN的Node.cloneNode()方法

语法：var dupNode = node.cloneNode(deep)
node:将要被克隆的节点
dupNode:克隆生成的副本节点
deep:是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

先上代码：

<ul id="mylist"></ul>
<script>
  const mylist = document.getElementById('mylist');
  const li = document.createElement("li");
  li.innerHTML = 'item';
  for(var i= 0;i<3;i++) {
    //此时我们需要克隆新的DOM元素
    mylist.appendChild(li.cloneNode(true));
  }
</script>

效果如图，实现了我们想要的效果：

2.创建函数

还有一种方法我们可以创建一个函数，通过函数来创建新的元素（效果同上图）。

<ul id="mylist"></ul>
<script>
  const mylist = document.getElementById('mylist');
  //创建函数每次创建新的DOM元素
  function newItem(element, nodelist) {
    var oDiv = document.createElement(element);
    oDiv.innerHTML = nodelist;
    return oDiv;
  }
  for(var i = 0;i<3;i++) {
    mylist.appendChild(newItem('li','item'));
  }
</script>