Copy all the attributes of one element and apply them to another with JavaScript
Last Updated :
24 Jan, 2023
The task is to copy all attributes of one element and apply them to another with the help of JavaScript. Here 2 approaches are discussed.
Approach 1:
- Select both elements(target and source element).
- Get the properties of source element by using el.prop(‘attributes’) method.
- Use .each() method on each object property and set that property to the target element by using .attr() method.
Example: This example implements the above approach.
HTML
< head >
< script src =
</ script >
</ head >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< p id = "GFG_UP" >
</ p >
< div id = "el1" style = "background: green;" >
Element 1
</ div >
< br >
< div id = "el2" >
Element 2
</ div >
< br >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" style = "color: green;" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML =
"Click on the button to copy all the attributes of one "+
"element and apply them to another.";
function GFG_Fun() {
var $el1 = $("#el1");
var $el2 = $("#el2");
var attrbts = $el1.prop("attributes");
// loop through element1 attributes and apply them on element2.
$.each(attrbts, function() {
$el2.attr(this.name, this.value);
});
down.innerHTML =
"All Attributes of Element 1 are copied to element 2.";
}
</ script >
</ body >
|
Output:
Copy all the attributes of one element and apply them to another with JavaScript
Approach 2:
- Select the both elements(target and source element).
- Get the properties of source element by using el.attributes property.
- Use .forEach() method on each property and set that property to the target element by using .setAttribute() method.
Example: This example implements the above approach.
HTML
< head >
< script src =
</ script >
</ head >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< p id = "GFG_UP" >
</ p >
< div id = "el1"
style="background: green;
color: white;
font-size: 26px;">
Element 1
</ div >
< br >
< div id = "el2" >
Element 2
</ div >
< br >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" style = "color: green;" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML =
"Click on the button to copy all the attributes of one element"+
" and apply them to another.";
function copyAttrs(target, source) {
[...source.attributes].forEach(attr => {
target.setAttribute(attr.nodeName, attr.nodeValue)
})
}
function GFG_Fun() {
var el1 = document.getElementById("el1");
var el2 = document.getElementById("el2");
copyAttrs(el2, el1);
down.innerHTML =
"All Attributes of Element 1 are copied to element 2.";
}
</ script >
</ body >
|
Output:
Copy all the attributes of one element and apply them to another with JavaScript
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...