2

div单击按钮时，我正在尝试使用 JavaScript 创建元素的副本。我正在使用该.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 );
}
4

4 回答 4

2

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

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

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

addOnDiv.appendChild(clonedNode );

至

addOnDiv.parentNode.appendChild(clonedNode );

在你的 JS 文件中

于 2017-09-12T18:44:52.020 回答
0

看看什么document.getElementById('addon')是通过写作选择的console.log(document.getElementById('addon'))。更重要的是，您正在<div id="addon">使用appendChild. 因此，当您下一次选择时，您addon选择了一个元素，其中嵌套了另一个插件克隆。这导致了你提到的乘法。

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

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

于 2017-09-12T18:42:45.280 回答
0

问题是您正在克隆并附加到同一个 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>

于 2017-09-12T18:54:36.230 回答
0

每次克隆addOndiv 时，都会将其变大。因此，第二次克隆它时，您正在克隆主 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 的答案以获得更清洁和更简单的解决方案。

于 2017-09-12T18:48:14.650 回答