Is it possible to clone html element objects in JavaScript?

Question

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

Answer 1

The modern approach is to use the cloneNode function:

let new_element = element.cloneNode(true);

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

Afterwards, you can add the cloned element to DOM somewhere. For example, you can use after() to insert the new element right after the original element:

element.after(new_element);

Compatibility:

Browser compatibility for Element.after

Browser compatibility for Node.cloneNode

Answer 2

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

Answer 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/

Answer 4

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

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

FIDDLE HERE

Answer 5

Get the HTML of the element to clone with .innerHTML, and then just make a new object by means of createElement()...

var html = document.getElementById('test').innerHTML;
var clone = document.createElement('span');
clone.innerHTML = html;

In general, clone() functions must be coded by, or understood by, the cloner. For example, let's clone this: <div>Hello, <span>name!</span></div>. If I delete the clone's <span> tags, should it also delete the original's span tags? If both are deleted, the object references were cloned; if only one set is deleted, the object references are brand-new instantiations. In some cases you want one, in others the other.

In HTML, typically, you'll want anything cloned to be referentially self-contained. The best way to make sure these new references are contained properly is to have the same innerHTML rerun and re-understood by the browser within a new element. Better than working to solve your problem, you should know exactly how it's doing its cloning...

Full Working Demo:

function cloneElement() {
    var html = document.getElementById('test').innerHTML;
    var clone = document.createElement('span');
    clone.innerHTML = html;
    document.getElementById('clones').appendChild(clone);
}

<span id="test">Hello!!!</span><br><br>

<span id="clones"></span><br><br>

<input type="button" onclick="cloneElement();" value="Click Here to Clone an Element">

Answer 6

It's actually very easy in jQuery:

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

Change .appendTo() of course...

Answer 7

Vanilla JS approach on what you are trying to do

const oldDdl = document.querySelector('#ddl_1');

const newDdl = oldDdl.cloneNode(true);

oldDdl.setAttribute('id','newId');

const oldDdlHtml = oldDdl.innerHTML;

Answer 8

Try this:

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

Answer 9

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/

Answer 10

In one line:

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