Есть ли способ клонировать элементы с помощью JQuery?

Question

Есть ли способ клонировать элементы HTML с помощью JQuery?

Однако я хочу, чтобы иметь возможность назначать клонированные элементы новым атрибутам «id, name». Поэтому, если у меня есть элемент текстового поля, я хочу клонировать его без его значение и изменит свой атрибут id и name на «exmple2», если раньше он был назван «пример».

Я был бы признателен за любую помощь по этой и любой другой реализации, которую я могу использовать, чтобы добавить дополнительные элементы в мою html-форму, которая уже существует на странице.

Спасибо всем

Answer 1

После того как вы клонированный элемент, который вы можете изменить его каким-либо образом вы хотите

Обновлено: Не заметил, что вы хотели бы изменить как имя и идентификатор.

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

Answer 2

documentation

Я использую JQuery над $, так что работает с другими библиотеками. Ниже приведен пример ввода текстового поля.

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

Если вы хотите клонировать обработчики событий, вы должны использовать клон (true).

Answer 3

Вот пример создания клона с использованием jquery.

Html код ::

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

код Javascript ::

var count=1; 

function addNewDiv(){ 
    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() { 

        return this.id + count; }) 

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

Вот ссылка на скрипку того же примера. Clone Fiddle