How do I copy the attributes of one element to another element?
HTML
A working solution on jsfiddle
EDIT
Updated jsfiddler
Javascript
$(function(){
var destination = $('#adiv').eq(0);
var source = $('#bdiv')[0];
for (i = 0; i < source.attributes.length; i++)
{
var a = source.attributes[i];
destination.attr(a.name, a.value);
}
});
HTML
<div id="adiv" class="aclass">A class</div>
<div id="bdiv" class="bclass">B class</div>
That's copying #bdiv
attributes to #adiv
.
ES6 syntax one liner:
function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName ,attr.nodeValue) })
}
And as noted in the first comment - you would probably don't want to copy the source id attribute... so this one will save it as a 'data-id' attribute in case you need a reference.
function cloneAttributes(target, source) {
[...source.attributes].forEach( attr => { target.setAttribute(attr.nodeName === "id" ? 'data-id' : attr.nodeName ,attr.nodeValue) })
}
I'm facing same problem and after invested lots of time and effort i am creating thisclone textarea into editable div with same attribute
select.getAttributeNames().forEach(attrName => {
$(div).attr(attrName, inputData.getAttribute(attrName));
});
A non-jquery solution:
function copy(element){
var clone = document.createElement(element.nodeName);
for(key in element){
clone.setAttribute(key,element[key]);
}
return clone;
}
It copies methods and other stuff you probably don't need, but hopefully you don't mind. This code is small and simple.
You can use the native Node#attributes property: http://jsfiddle.net/SDWHN/16/.
var $select = $("select");
var $div = $("div");
var attributes = $select.prop("attributes");
// loop through <select> attributes and apply them on <div>
$.each(attributes, function() {
$div.attr(this.name, this.value);
});
alert($div.data("foo"));