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

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

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

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

addOnDiv.appendChild(clonedNode );

到

addOnDiv.parentNode.appendChild(clonedNode );

在你的 JS 文件中