How to Append Duplicate elements with content using jQuery .clone() Method

jquery

← PrevNext →

Tools you can use

We can add or append HTML elements dynamically on a web page. Similarly, we can add a copy of matched elements with its content on the web page. When I say matched elements, I mean we can add a clone of a DIV element (<div>) or a paragraph (<p>) element, using jQuery .clone() method.

Clone an element with content using jQuery

Clone a DIV element and its Content

The <div> element acts as a container in most cases. Therefore, we can clone the element and its content into several other elements.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div id="Container">Hello, how was your day!</div>
    <p><input type="button" id="Button1" value="Clone it" /></p>
</body>

<script>
    $(document).ready(function () {
        $('#Button1').on('click', function () {
            $('#Container')
                .clone()
                .appendTo("body");
        });
    });
</script>
</html>
Try it

Clone a DIV element and Add New Content to Cloned elements

I'll now show you how to clone a <div> element, and add new content to the cloned elements.

<body style="width:300px;">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div id="Container">I am Original</div>
    <p><input type="button" id="Button1" value="Clone it" /></p>

</body>
<script>
    $(document).ready(function () {
        $('#Button1').on('click', function () {
            $('#Container')
                .clone()
                .text('I am a Clone')
                .appendTo('body');
        });
    });
</script>
</html>
Try it

Output

Clone a DIV element using jQuery .clone() method

Related: Slide Up and Down with jQuery slideToggle(), slideUp() and slideDown() Methods

Let’s take this to a next level and see features that are more interesting. I'll add a dropdown list using HTML Select tag. The list will have few values, and I'll clone the dropdown list with its content.

Each newly (cloned) created dropdown list will have its own identity, but the values in the list remains the same. Later, I’ll clone one its events (dropdown list event) and see how each clone responds to its events.

Finally, I’ll append the cloned dropdown list to a different container.

Clone a Drop Down List using jQuery .clone()

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div>
        <select id="selBook">
            <option value="">Please select a Book</option>
            <option value="Computer Architecture">Computer Architecture</option>
            <option value="Asp.Net 4 Blue Book">Asp.Net 4 Blue Book</option>
            <option value="Teaching Science">Teaching Science</option>
            <option value="Pro HTML5 Programming">Pro HTML5 Programming</option>
        </select>

        <input type="button" id="btClone" value="Clone the list" style="float:right;" />
    </div>

    <div id="container" style="display:none;"></div>
</body>

<script>
    $(document).ready(function () {
        var iCnt = 1;
        $('#btClone').on('click', function () {

            $('#selBook')
                .clone()
                .attr('id', 'selBook' + iCnt)
                .appendTo("#container");

            $("#container").attr('style', 'display:block;border:solid 1px #555;');

            iCnt = iCnt + 1;
        });
    });
</script>
</html>
Try it

Clone a Drop Down List and its Event

We have cloned the dropdown list, also gave each element a new id. Let us now check how each cloned element reacts to an event, which it has inherited from its original element (dropdown list). We will attach the “onchange” event to the parent dropdown list, and the remaining markup and script remains the same.

<select id="selBook" onchange="javascript:alert('ID: ' + this.id + ', Value: ' + this.value);">

That's it. I am sure this article with its examples will help your in your projects. If you have any suggestions or queries, please leave a message below.

Thanks for reading ☺.

← PreviousNext →