How to copy contents of a div into another div?

General

Apr 08, 2020

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/[email protected]/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);
});