08-Apr-2020
.
Admin
Hello Guys,
In this blog we are learn how to copy one div and paste into another div. you can do this using many types of jquery function. but here we are use "clone()" and "append()" function. using clone function you can copy any content. this is add more example. you can click on button and copy one div then append into parent div.
<!DOCTYPE html>
<html>
<head>
<title>How to copy contents of a div into another div?</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 parent-div">
<div class="row" id="copy-this-div">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-success add-btn">Add Field</button>
</div>
</div>
</body>
</html>
$('body').on("click", '.add-btn', function() {
var copyContent = $("#copy-this-div").clone();
$('.parent-div').append(copyContent);
});
I hope it can help you...
#Bootstrap 4
