Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • clone() method in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 335
    Comment on it

    clone() Method:

    Clone() method is used to make copy of selected html element including its child nodes, data and properties. It is useful when we need to duplicate html elements in a webpage.

     

    Syntax:

    $(selector).clone(true|false)

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    </head>
    <body>
    <div style="border:1px solid black;width:300px;padding:5px 10px;margin-bottom:4px;">
    	<p>Lorem ipsum dolor sit amet.</p>
    	<p>quis nostrud exercitation ullamc.</p>
    </div>
    <button class="btn" style="border:1px solid black;border-radius:13px 10px;">Clone div</button>
    <script>
    	$(document).ready(function(){
    	    $(".btn").click(function(){
    	        $("div").clone().appendTo("body");
    	    });
    	});
    </script>
    </body>
    </html>

    In the above example when we click on clone button, it will make copy of div as well as the <p> tags with their content.

    You can check above example output here https://jsfiddle.net/uo770gfq/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: