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

当单击按钮时，我正在尝试使用JavaScript创建div元素的副本。我正在使用.cloneNode()方法，但它正在乘以结果。

最初，页面上有一个元素的实例；单击该单击，将两倍到2，但是在下一次单击时，它再次翻倍到4。我需要单独添加，因此单击 -> 3，单击 -> 4等。

。

我的Codepen是：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 );
}

发生这种情况，因为cloneNode克隆既有节点又包括任何包含的孩子。

克隆addondiv后，然后将新克隆添加到addon的孩子。因此，它现在是addon和节点的一部分，将在每个后续添加中复制。

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

addOnDiv.appendChild(clonedNode );

addOnDiv.parentNode.appendChild(clonedNode );

在您的JS文件中

通过编写console.log(document.getElementById('addon'))来查看document.getElementById('addon')选择的内容。更多的是，您使用appendChild在现有插件元素中附加了<div id="addon">。因此，当您下一个选择addon时，您已经选择了一个嵌套在其中的插件的克隆的元素。这引起了您提到的乘法。

您可能需要使用：addOnDiv.parentNode.appendChild(clonedNode);

附加到parenthnode

还要注意，您具有多个元素，其ID具有addon的相同ID。这是允许的，但可能无法按照您的期望进行。

每次克隆addOn DIV时，您都会使其更大。因此，第二次克隆它，您是在克隆主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的答案，以解决更清洁，更简单的解决方案。

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

相关内容

最新更新

热门标签：