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

Question

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

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

像这样的东西(伪代码):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Answer 1

使用原生JavaScript:

newelement = element.cloneNode(bool)

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

这是关于MDN的完整文档.

Answer 2

jQuery方式(不是最有效的):

查看JQuery 的clone()方法

使用您的代码,您可以执行以下操作:

// 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 );

Answer 3

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

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

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

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