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

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

通过写 console.log(document.getElementById('addon')) 看看 document.getElementById('addon') 是什么 select。更重要的是，您使用 appendChild 在现有插件元素内附加 <div id="addon">。因此，当您接下来 select addon 时，您已经 select 编辑了一个元素，其中嵌套了插件的另一个克隆。这导致了你提到的乘法。

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

另请注意，您有多个具有相同 ID addon 的元素。这是允许的，但可能不会像您预期的那样执行。

Answer 2

发生这种情况是因为 cloneNode 克隆了节点及其包含的所有子节点。

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

最简单的修复方法是将克隆的节点附加为 addon 的兄弟节点而不是子节点。您只需要更改

addOnDiv.appendChild(clonedNode );

到

addOnDiv.parentNode.appendChild(clonedNode );

在你的 JS 文件中

Answer 3

每次克隆 addOn div，都会使它变大。所以你第二次克隆它时，你克隆了主 div 加上你上次添加的 child，下一次你将克隆 div 现在有另一个 child，等等

要解决此问题，请确保您一次只克隆一个 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>

编辑：

请参阅以获得更清晰、更简单的解决方案。

Answer 4

问题是您正在克隆和追加相同的 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 添加元素方法加倍不添加

JavaScript add element method doubling not adding

javascript

html

clonenode