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元素只存在于一个地方，因此在追加后它会被移动到一个新的地方（在你的情况下，它被移除并附加到同一个地方）

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

检查下面的更新示例：

＆＃13;

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");

＆＃13;

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

＆＃13;

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

＆＃13;

js - 复制所有子节点

1 个答案: