Javascript克隆以递增方式复制div

Question

我目前正在开发网页，其中一项功能是允许用户通过点击图片向页面添加额外的div（已存在）。该页面使用Bootstrap 3.0设计

此div已经存在，当按下图像时，它会复制div。如果用户想要复制div一次，这可以正常工作，但是如果他们试图复制它两次，那么div重复4次，如果他们尝试3次，则div重复8次。

以下是我复制div的Javascript代码 -

function addRow() {
  var row = document.getElementById("row-to-clone");
  var clone = row.cloneNode(true);

  row.appendChild(clone);
}

行到克隆只是我要复制的div的ID，但我不知道为什么它会多次复制它。有人会有什么建议吗？

感谢。

Answer 1

问题是您将克隆的行追加为原始行的子项。你认为你这样做：

+-----+
|  A  |
+-----+
+-----+
|  A' |
+-----+

...但你实际上是这样做的：

+-------+
|   A   |
|+-----+|
||  A' ||
|+-----+|
+-------+

当您第二次克隆 A 时，您将获得 A 及其所有子项，其中包括 A'，ergo 4行。

要将克隆附加到原始文件之后，请执行以下操作：

row.parentNode.insertBefore(clone, row.nextSibling);

Answer 2

您需要将新div添加到row的父级而不是row本身。

function addRow() {
  var row = document.getElementById("row-to-clone");

  var clone = row.cloneNode(true);

  row.parentNode.appendChild(clone);
}

请参阅fiddle