Dynamic DIV elements on button click
Question
I have a scenario in which I need to show a DIV element on a button click and if the user clicks on the button again I need to show the same DIV element twice and so on as many times the user clicks on the button. The below is the DIV element
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" >
<option>True</option>
<option>False</option>
</select>
</div>
And the below is the button
<button class="btn btn-primary"
type="button" style="margin-left: 30px;">Add new selection</button>
3 answers
solution1
1 2015-10-30 12:25:43
You can use .clone() for this,
$(".btn").click(function () {
var div = $(".input-group").last();
div.after(div.clone());
});
clone() will get a copy of the specified element. Then you can use last() or before() to add the element to the dom.
If you have a container for this div elements, then you can use append() as well
solution2
0 ACCPTED 2015-10-30 12:35:16
You can use clone if you want to have an exact copy of the div. in case of any dynamic divs, you can consider using append like the jsfiddle
solution3
0 2015-10-30 12:56:40
Are you saying something like this ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("ol").append("<select class='show-tick'><option>True</option><option>False</option></select><br>");
});
});
</script>
</head>
<body>
<ol>
<div class="input-group" id="selection">
<span class="input-group-addon">
<i class="icon wb-menu" aria-hidden="true"></i>
</span>
<select class="show-tick" data-plugin="select2" >
<option>True</option>
<option>False</option>
</select>
</div>
</ol>
<button id="btn">Append list item</button>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.