js - 复制所有子节点

Question

我想复制一个容器中的所有子节点，并将它们插入同一个容器中。

例如，我有：

<div id="container">
  <div class="square red"></div>
  <div class="square green"></div>
</div>

在运行这个 JS 之后：

function duplicateChildNodes (parentId){
  var parent = document.getElementById(parentId);
  NodeList.prototype.forEach = Array.prototype.forEach;
  var children = parent.childNodes;
  children.forEach(function(item){
    parent.appendChild(item);
  });
};

duplicateChildNodes("container");

我应该：

<div id="container">
  <div class="square red"></div>
  <div class="square green"></div>
  <div class="square red"></div>
  <div class="square green"></div>
</div>

出于某种原因，它不起作用。我该如何解决？
一支笔：https : //codepen.io/t411tocreate/pen/gXqYWj

Answer 1

该 dom 元素仅存在于一个地方，因此在 append 后将其移动到新位置（在您的情况下，它被删除并附加到同一位置）

您首先需要克隆节点。前任：var cln = itm.cloneNode(true);

检查下面的更新示例：

function duplicateChildNodes (parentId){
  var parent = document.getElementById(parentId);
  NodeList.prototype.forEach = Array.prototype.forEach;
  var children = parent.childNodes;
  children.forEach(function(item){
    var cln = item.cloneNode(true);
    parent.appendChild(cln);
  });
};

duplicateChildNodes("container");

#container{
  border: 1px solid #ccc;
  padding: 2px;
}
.square{
  width: 100px;
  height: 100px;
  display: block;
  margin: 2px;
}
.red{
  background: red;
}

.green{
  background: green;
}

<div id="container">
  <div class="square red"></div>
  <div class="square green"></div>
</div>