Is There A Way To Clone Elements Using Jquery?

Is there a way to clone HTML elements using JQuery? However, I want to be able to assign the cloned elements new attributes 'id, name'. So if I had a textfield element, I want to c

Solution 1:

Once you have a cloned element you can change it any way you want to

Updated: Didn't notice that you wanted to change both name and id.

$("#example").clone()
             .attr({"id":"example2", "name":"example2"})
             .html("new content")
             .appendTo("#container");

Solution 2:

documentation

I use jQuery over $ so it works with other libraries. Here is an example on an input text field.

jQuery('#example').clone().val('').attr('id', 'exmple2').attr('name', 'exmple2').insertAfter('#example');

If you want to clone the event handlers as well, you have to use clone(true).

Solution 3:

Here is sample of creating clone using jquery.

Html code::

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divstyle="margin: 10px 10px 10px 0px"id="addNewDiv"><tablestyle="width: 100%"id="maintable"class="cloneTable"><tr><td><inputtype="text"name="text"id="text"/></td></tr></table></div><inputtype="button"value="Add New Div"onclick="addNewDiv();"style="background-color: #3E8DE1; color: white;" />

Javascript code::

var count=1;

functionaddNewDiv(){
    var $clone = $(".cloneTable:first").clone(true);
        $clone.find(':text,:file').each(function() {
            $(this).attr('id',($(this).attr("id")+count));
            $(this).val('');
        });
         $clone.find("a").each(function() {
              $(this).val('').attr('id', function(_, id) {
                return count;
              });
            });
         $clone.find("span").each(function() {
             $(this).attr({
                id: $(this).attr("id") + count
         });
        });


              $clone.attr( 'id', function() { 

                  returnthis.id + count; })

         .appendTo('#addNewDiv');
    count=count+1;
  }

Here is the link of fiddle of same example. Clone Fiddle