Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make clone of an element in jQuery?

    @gunjan.tewari
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 276
    Comment on it

    Hello friends,

    Today we learn how to make clone of an element using jQuery. In jQuery, clone() method is used to make clone or copy of a set of element or a particular element. This method makes not only the copy of element but also it's child, attributes and content also. In other words, we can say that this method create the duplicate element of a particular element.

    Syntax:

    1. $(selector).clone(true|false)

    selector is the element whose clone we want to creator. true | false means whether to make the copy of the event handler or not. By default value is false

    Let's take and example to understand this method.

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("button").click(function(){
    8.         $("body").append($("p:first").clone(true));
    9.         $("div").clone().appendTo("body");  ;
    10.     });
    11. });
    12. </script>
    13. </head>
    14. <body>
    15.  
    16. <div>
    17.   <p>first para</p>
    18.   <ul>
    19.     <li>list1</li>
    20.     <li>list2</li>
    21.   </ul>
    22. </div>
    23.  
    24. <button>Create clone of the element</button>
    25.  
    26. </body>
    27. </html>
    28.  

    In above example, when you click on the button one time it will make the copy of p and the div element. If you will again click it will again make the copy and so on.

    How to make clone of an element in jQuery clone method jquery
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: