我正在尝试使用 Javascript 在单击按钮时向页面添加一个部分。我无法让它工作。我的代码笔是 https://codepen.io/anon_guy/pen/VMZWWW
(感谢您的帮助,我已经让它接近我想要的位置,但是该元素最初仍然可见,它应该被隐藏但是如果我在 CSS 中将显示设置为无,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;
}
最佳答案
您可以将显示默认设置为无,然后在您第一次单击时将其更改为阻塞,否则克隆元素容器并附加它:
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 );
}
}
希望这对您有所帮助。
关于Javascript 使可见并在单击时添加多个 div-现在几乎可以工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46160970/