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

Question

我正在寻找一些如何解决我的问题的技巧。

我在表格中有一个html元素（如选择框输入字段）。现在我想复制对象并从副本生成一个新对象，并使用JavaScript或jQuery。我认为这应该以某种方式起作用，但此刻我有点无能为力。

像这样的东西（伪代码）：

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Answer 1

使用您的代码，您可以使用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

Answer 2

使用原生JavaScript：

newelement = element.cloneNode(bool)

其中Boolean表示是否克隆子节点。

Here is the complete documentation on MDN。

Answer 3

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

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

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

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

Answer 4

它在jQuery中实际上非常简单：

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

改变.appendTo（）当然......

Answer 5

您可以使用clone（）方法创建副本..

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

FIDDLE HERE

Answer 6

试试这个：

$('#foo1').html($('#foo2').children().clone());

Answer 7

在一行中：

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

Answer 8

您需要选择“＃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/