是否可以在JavaScript / JQuery中克隆html元素对象?


100

我正在寻找有关解决问题的技巧。

我在表中有一个html元素(如选择框输入字段)。现在,我想复制对象并从副本中生成一个新对象,并使用JavaScript或jQuery生成一个对象。我认为这应该以某种方式起作用,但目前我一点也不了解。

这样的东西(伪代码):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Answers:


60

使用您的代码,您可以使用cloneNode()方法在纯JavaScript中执行以下操作

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

或使用jQuery clone()方法(效率最高):

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

30
克隆元素时修改ID非常重要。
Dragos Durlut 2012年

284

使用原生JavaScript:

newelement = element.cloneNode(bool)

其中的布尔值指示是否克隆子节点。

这是有关MDN的完整文档


50
最佳答案。不要在不需要的地方使用jquery。
luschn 2014年

看起来不错...但是浏览器的兼容性到今天仍然值得怀疑。
Aniket Suryavanshi

13
@AniketSuryavanshi我不确定特别是2月4日左右,但是今天的兼容性看起来很完美

2
ID和名称将重复。需要更改ID,如果需要重复的名称,则可以原样保留名称。
przemo_li

太糟糕了,您失去了所有属性:/
Pieter De Bie

16

是的,您可以复制一个元素的子元素并将其粘贴到另一元素中:

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

证明:http//jsfiddle.net/de9kc/


重复的ID将成为您的处理方法的问题
przemo_li

4

在jQuery中,这实际上非常简单:

$("#ddl_1").clone().attr("id",newId).appendTo("body");

当然要更改.appendTo()...


2

您可以使用clone()方法创建一个副本。

$('#foo1').html( $('#foo2 > div').clone())​;

在这里




0

您需要选择“#foo2”作为选择器。然后,使用html()获取它。

这是html:

<div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

这是JavaScript:

$("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

这是jsfiddle:http : //jsfiddle.net/fritzdenim/DhCjf/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.