Question

我尝试使用Javascript在单击按钮时向页面添加部分。我不能让这个工作。我的代码是https://codepen.io/anon_guy/pen/VMZWWW

（感谢帮助我已经把它接近我想要的地方，但是元素最初仍然可见，它应该被隐藏但是如果我在CSS中将display设置为none则JS不会改变它。代码已经发生了很大的变化，这是我目前的目标

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>
          <iv>

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

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

JS：

 document.getElementById('launch').onclick = function() {
    var addOnDiv = document.getElementById('addon');

    if (addOnDiv.style.display === 'none') {
      addOnDiv.style.display = 'block';
    } else {

      var clonedNode = addOnDiv.cloneNode(true);
      addOnDiv.appendChild( clonedNode );      
    }
  }

CSS：

button {
  float: right;
  margin: 30px;
}

.panel-body {
  border: 1px solid #333;
  background: azure;
}
#addon{
  display:none;
}

Answer 1

<强> Working fiddle

默认情况下，您可以将显示设置为none，然后在第一次单击时将其更改为阻止，否则克隆元素容器并附加它：

document.getElementById('show/hide').onclick = function() {
  var divTest = document.getElementById('addon');

  if (divTest.style.display === 'none') {
    divTest.style.display = 'block';
  } else {
    var new_line = divTest.querySelector('.col-sm-6').cloneNode(true);
    divTest.querySelector('.panel-body').appendChild( new_line );
  }
}

希望这有帮助。

Answer 2

您应该显示并隐藏ID为＃34;插件＆＃34;首次。在随后的点击中，使用CloneNode方法克隆节点。

将它附加到包装器。

＆＃13;

document.getElementById('show/hide').onclick = function() {
    var addOnDiv = document.getElementById('addon');
  
    if (addOnDiv.style.display === 'none') {
      addOnDiv.style.display = 'block';
    } else {
    
      var clonedNode = addOnDiv.querySelector('.col-sm-6').cloneNode(true);
      addOnDiv.querySelector('.panel-body').appendChild( clonedNode );
      
      
    }
  }

＆＃13;

button {
  float: right;
  margin: 30px;
}

.panel-body {
  border: 1px solid #333;
  background: azure;
}

＆＃13;

<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="add_component">
    <a href='#' id="show/hide">
      <h3>Add:</h3>
    </a>

  </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>

＆＃13;

＆＃13; 我也对HTML进行了一些更改。

您不需要多个表单元素。您只是在一个表单元素上指定id并尝试提交内部元素。
很少有标签未正确关闭。
我在第二个面板周围添加了一个包装器组件。这样做是为了防止您想要复制整个面板。如果您只想复制表单元素，可以删除它，如下面的代码所示。

Javascript可见并在点击时添加多个div - 现在几乎可以正常工作

2 个答案: