Append Duplicate Elements and Contents Using jQuery .clone() Method

← PrevNext →

We can add or append HTML elements dynamically on a web page. Similarly, we can add a copy of matched elements with its contents 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 a DIV element and its Contents

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

<!doctype html>
<html>
<head>
    <title>jQuery Clone() – Add Elements and its Contents</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        div {
            margin:3px;
            padding:3px;
            border:solid 1px #999;
            width:300px;
        }
    </style>
</head>

<body>
    <p>Click the button to clone (make a duplicate) of the DIV element!</p>

    <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 Contents to Cloned elements

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

<!doctype html>
<html>
<head>
    <title>jQuery Clone() Method Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        div {
            margin:3px;
            padding:3px;
            border:solid 1px #999;
            width:200px;
        }
    </style>
</head>

<body style="width:300px;">
    <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

jQuery .clone() DIV

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()

<!doctype html>
<html>
<head>
    <title>jQuery Clone() - Clone a DropDown List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        div {margin:3px;padding:3px;border:solid 1px #999;width:300px;}
        select {margin:2px;}
    </style>
</head>

<body>
    <div id="container1">
        <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="container2" style="display:none;"></div>
</body>

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

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

            $("#container2").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 →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner