Question

有没有办法使用JQuery克隆HTML元素？

但是，我希望能够为克隆元素分配新属性“id，name”。因此，如果我有一个textfield元素，我希望将其克隆其值并将更改其id和name属性克隆为“exmple2”（如果它之前已命名为“example”）。

我将非常感谢您对此以及我可用于向页面上已存在的html表单添加更多元素的任何其他实现的任何帮助。

全部谢谢

Answer 1

获得克隆元素后，您可以按照自己想要的方式进行更改

已更新：未注意到您要更改名称和ID。

$("#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');

如果你想克隆事件处理程序，你必须使用clone（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 code ::

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

有没有办法使用JQuery克隆元素？

3 个答案: