Is it possible to clone html element objects in JavaScript / JQuery?

问题

I am looking for some tips on how to solve my problem.

I have a html element (like select box input field) in a table. Now I want to copy the object and generate a new one out of the copy, and that with JavaScript or jQuery. I think this should work somehow but I\'m a little bit clueless at the moment.

Something like this (pseudo code):

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

newDdl = oldDdl;

oldDdl.attr(\'id\', newId);

oldDdl.html();

回答1:

Using your code you can do something like this in plain JavaScript using the cloneNode() method:

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

Or using jQuery clone() method (not the most efficient):

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

回答2:

With native JavaScript:

newelement = element.cloneNode(bool)

where the Boolean indicates whether to clone child nodes or not.

Here is the complete documentation on MDN.

回答3:

Yes, you can copy children of one element and paste them into the other element:

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

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

Proof: http://jsfiddle.net/de9kc/

回答4:

It's actually very easy in jQuery:

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

Change .appendTo() of course...

回答5:

You can use clone() method to create a copy..

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

FIDDLE HERE

回答6:

Try this:

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

回答7:

In one line:

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

回答8:

You need to select "#foo2" as your selector. Then, get it with html().

Here is the html:

<div id="foo1">

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

Here is the javascript:

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

Here is the jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/

来源：https://stackoverflow.com/questions/921290/is-it-possible-to-clone-html-element-objects-in-javascript-jquery

标签

javascript

jquery

clone

elements