Question

我点击按钮时尝试使用JavaScript创建div元素的副本。我使用.cloneNode()方法，但它会将结果相乘。

最初页面上有一个元素实例;单击时加倍为2，但是在下一次单击时它再次翻倍为4.我需要单独添加，所以点击 - > 3，点击 - > 4，等等。

我的代码是：https://codepen.io/anon_guy/pen/VMZWWW

HTML：

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

    </form>
  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JS：

document.getElementById('launch').onclick = function() {
    var addOnDiv = document.getElementById('addon');
    var clonedNode = addOnDiv.cloneNode(true);
    addOnDiv.appendChild(clonedNode );
}

Answer 1

这是因为cloneNode克隆了节点以及它包含的任何子节点。

克隆addon div后，将新克隆追加到addon的子项。因此，它现在是addon的一部分，两个节点将在每个后续添加中复制。

最简单的解决方法是将克隆节点作为addon的兄弟而不是孩子附加。你只需要改变

addOnDiv.appendChild(clonedNode );

到

addOnDiv.parentNode.appendChild(clonedNode );

在你的JS文件中

Answer 2

通过撰写document.getElementById('addon')来了解console.log(document.getElementById('addon'))选择的内容。更重要的是，您使用<div id="addon">将appendChild附加到现有插件元素中。因此，当您接下来选择addon时，您已选择了另一个嵌入其中的addon克隆的元素。这导致你提到的乘法。

您可能希望使用以下内容附加到父节点：addOnDiv.parentNode.appendChild(clonedNode);

另请注意，您有多个具有相同ID addon的元素。这是允许的，但可能无法按预期执行。

Answer 3

每次克隆addOn div时，你都会变大。因此，第二次克隆它时，您将克隆主div和上次添加的子节点，下次您将克隆现在有另一个子节点的div等。

要解决此问题，请确保您一次只克隆一个div。请参阅此代码以获得解决方案：

var doneOnce = false;    // flag

document.getElementById('launch').onclick = function() {
  var addOnDiv = document.getElementById('addon');
  var clonedNode = addOnDiv.cloneNode(true);
  doneOnce ? clonedNode = addOnDiv.childNodes[addOnDiv.childNodes.length - 1].cloneNode(true) : doneOnce = true;
  addOnDiv.appendChild(clonedNode);
}

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

    </form>
  </div>
  <div class="row">
    <div class="add_component">
      <button id='launch'>Add Component</button>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

修改

请参阅@AnilRedshift's answer以获得更清晰，更简单的解决方案。

Answer 4

问题是你正在克隆并附加到同一个div。所以最初div有一个组件。一旦克隆了包含一个div的div，它就变为两个，当你克隆包含两个组件的div并将其附加到它时，组件总数就变成四个，依此类推。

我编辑了代码，而不是一次又一次地附加到同一个容器，我将附加到我已分配ID“mContainer”的父容器。您可以根据需要更改代码。请参阅下面的更新代码。

https://codepen.io/bilaleme90/pen/eGYvRd

JS和HTML：

document.getElementById('launch').onclick = function() {
  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('mContainer')
  var clonedNode = addOnDiv.cloneNode(true);
  container.appendChild(clonedNode);
}

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

    </form>
  </div>
  <div class="row">
    <div class="add_component">
      <button id='launch'>Add Component</button>
    </div>
  </div>
</div>
<div class="wrapper" id="mContainer">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JavaScript添加元素方法加倍不添加

4 个答案: