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;"> neveropen </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;"> neveropen </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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
