• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Clone() Method Example

May 2, 2014 //  by Krishna Srinivasan//  Leave a Comment

The clone() method is used to make duplicate copy of selected elements. Means it copies the matched elements as well as their descendant elements and text nodes. It copies child nodes, text and attributes of the selected elements. It clones matched DOM elements and select the clones. It is also useful for moving elements into other location in the DOM. It is convenient way to make deep copy of elements on the page.

JQuery Clone() Syntax

$(selector).clone().childnode();

It has parameter called childnode is the required parameter which include childnode, text attributes.

JQuery Clone() Example

<!doctype html>
<head>
<title>JQuery Clone Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Clone Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
          $("<p>Welcome to JavaBeat!!!</p>").clone().insertBefore("h3");
       });
    });
</script>
<body>
   <h3>Hello!!!</h3>
   <button>Click Here</button>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“button”).click(function()) line defines click event which occurs when button is clicked.
  • $(“Welcome to JavaBeat!!!”).clone().insertBefore(“h3”); line defines clone method used to make duplicate copy of selected elements. It inserts the line Welcome to JavaBeat!!! before the line Hello!!!.

JQuery Clone() Demo

When you run the above example, you would get the following output:

  • Run This Demo

JQuery Clone Method Example

The clone() method is also used to make duplicate copy of selected elements with appendTo() method as shown in the below example:

<!doctype html>
<head>
<title>JQuery Clone Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Clone Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
        $("<strong>Welcome to JQuery!!!</strong>").clone().appendTo(".myappend");
      });
   });
</script>
<body>
   <button>Insert element to the end of p element</button>
   <div class="myappend">
        <p>Hello World!!!</p>
   </div>
</body>
</html>

In above example, we have used clone() method with appendTo() method which will make deep copy of selected elements. The appendTo() method indicates JS interpreter to append the content in quotes to div class elements. When you run the script, click on the button which will appear on the browser, the line Welcome to JQuery!!! appends after the line Hello World!!!

Category: jQueryTag: JQuery Methods

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: «jquery JQuery Attr() Method Example
Next Post: JQuery Detach Method() Example jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact