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