You can do it using clone()
function of jQuery, Accepted answer is ok but i am providing alternative to it, you can use append()
, but it works only if you can change html slightly as below:
$(document).ready(function(){_x000D_
$('#clone_btn').click(function(){_x000D_
$("#car_parent").append($("#car2").clone());_x000D_
});_x000D_
});
_x000D_
.car-well{_x000D_
border:1px solid #ccc;_x000D_
text-align: center;_x000D_
margin: 5px;_x000D_
padding:3px;_x000D_
font-weight:bold;_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<div id="car_parent">_x000D_
<div id="car1" class="car-well">Normal div</div>_x000D_
<div id="car2" class="car-well" style="background-color:lightpink;color:blue">Clone div</div>_x000D_
<div id="car3" class="car-well">Normal div</div>_x000D_
<div id="car4" class="car-well">Normal div</div>_x000D_
<div id="car5" class="car-well">Normal div</div>_x000D_
</div>_x000D_
<button type="button" id="clone_btn" class="btn btn-primary">Clone</button>_x000D_
_x000D_
</body>_x000D_
</html>
_x000D_
try this out
$("div[id^='car']:last").after($('#car2').clone());
This works great if a straight copy is in order. If the situation calls for creating new objects from templates, I usually wrap the template div in a hidden storage div and use jquery's html() in conjunction with clone() applying the following technique:
<style>
#element-storage {
display: none;
top: 0;
right: 0;
position: fixed;
width: 0;
height: 0;
}
</style>
<script>
$("#new-div").append($("#template").clone().html(function(index, oldHTML){
// .. code to modify template, e.g. below:
var newHTML = "";
newHTML = oldHTML.replace("[firstname]", "Tom");
newHTML = newHTML.replace("[lastname]", "Smith");
// newHTML = newHTML.replace(/[Example Replace String]/g, "Replacement"); // regex for global replace
return newHTML;
}));
</script>
<div id="element-storage">
<div id="template">
<p>Hello [firstname] [lastname]</p>
</div>
</div>
<div id="new-div">
</div>
Source: Stackoverflow.com