Is it possible to clone html element objects in JavaScript?
JavascriptJqueryJavascript Problem Overview
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();
Javascript Solutions
Solution 1 - Javascript
With native JavaScript:
newelement = element.cloneNode(bool)
where the Boolean indicates whether to clone child nodes or not.
Solution 2 - Javascript
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
Solution 3 - Javascript
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/
Solution 4 - Javascript
It's actually very easy in jQuery:
$("#ddl_1").clone().attr("id",newId).appendTo("body");
Change .appendTo() of course...
Solution 5 - Javascript
You can use clone() method to create a copy..
$('#foo1').html( $('#foo2 > div').clone());
Solution 6 - Javascript
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">
Solution 7 - Javascript
Try this:
$('#foo1').html($('#foo2').children().clone());
Solution 8 - Javascript
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;
Solution 9 - Javascript
In one line:
$('#selector').clone().attr('id','newid').appendTo('#newPlace');
Solution 10 - Javascript
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/