How to copy all the attributes of one element and apply them to another?
JavascriptJqueryJavascript Problem Overview
How do I copy the attributes of one element to another element?
HTML
<select id="foo" class="bar baz" style="display:block" width="100" data-foo="bar">...</select>
<div>No attributes yet</div>
JavaScript
var $div = $('div');
var $select = $('select');
//now copy the attributes from $select to $div
Javascript Solutions
Solution 1 - Javascript
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"));
Solution 2 - Javascript
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) })
}
Solution 3 - Javascript
Pretty Simple
function cloneAttributes(element, sourceNode) {
let attr;
let attributes = Array.prototype.slice.call(sourceNode.attributes);
while(attr = attributes.pop()) {
element.setAttribute(attr.nodeName, attr.nodeValue);
}
}
Solution 4 - Javascript
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
.
Solution 5 - Javascript
We could also try extending the jQuery prototype ($.fn
) object to provide a new method that can be chained to the jQuery() function.
Here's an extension of @pimvdb's solution to provide a function that copies all attributes
The usage would be like so:
$(destinationElement).copyAllAttributes(sourceElement);
The extension function can be defined like so:
(function ($) {
// Define the function here
$.fn.copyAllAttributes = function(sourceElement) {
// 'that' contains a pointer to the destination element
var that = this;
// Place holder for all attributes
var allAttributes = ($(sourceElement) && $(sourceElement).length > 0) ?
$(sourceElement).prop("attributes") : null;
// Iterate through attributes and add
if (allAttributes && $(that) && $(that).length == 1) {
$.each(allAttributes, function() {
// Ensure that class names are not copied but rather added
if (this.name == "class") {
$(that).addClass(this.value);
} else {
that.attr(this.name, this.value);
}
});
}
return that;
};
})(jQuery);
An Example is available at http://jsfiddle.net/roeburg/Z8x8x/
Hope this helps.
Solution 6 - Javascript
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.
Solution 7 - Javascript
You can try this:
function copyAttributes(from, to)
{
$($(from)[0].attributes).
each(function(){$(to).attr(this.nodeName, this.nodeValue);});
return $(to);
};
The return statement lets you write things like:
copyAttributes(some_element, $('<div></div>')).append(...) ...
Hope this helps.
Solution 8 - Javascript
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));
});
Solution 9 - Javascript
A very straight to the point solution would be make something like this:
const _$ = domQuery => document.querySelector(domQuery)
let div1 = _$('#div-1')
let div2 = _$('#div-2')
for(attr of div1.attributes) {
div2.setAttribute(attr.name, attr.value);
}
.my-div {
height: 100px;
width: 100px;
}
<h1>div-1</h1>
<div atribute-test="test" class="my-div" style="background: red" id="div-1"></div>
<h1>div-2</h1>
<div id="div-2"></div>
Solution 10 - Javascript
Since Firefox 22, Node.attributes is no longer supported (not implemented by other browsers and removed from the spec). It is only supported on Element (Element.attributes).
Solution 11 - Javascript
Javascript solution
Copy the attributes of old element to the new element
const $oldElem = document.querySelector('.old')
const $newElem = document.createElement('div')
Array.from($oldElem.attributes).map(a => {
$newElem.setAttribute(a.name, a.value)
})
Replace the old element with the new element, if required
$oldElem.parentNode.replaceChild($newElem, $oldElem)
Solution 12 - Javascript
$("div").addClass($('#foo').attr('class'));