Skip to content
Related Articles

Related Articles

Copy all the attributes of one element and apply them to another with JavaScript

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Sep, 2021
View Discussion
Improve Article
Save Article

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 1: This example implements the above approach.  

HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        Copy all the attributes of one element
      and apply them to another with JavaScript.
    </title>
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
    <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>
 
</html>

Output: 

  • Before clicking on the button:

  • After clicking on the button:

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 2: This example implements the above approach. 

HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        Copy all the attributes of one element
      and apply them to another with JavaScript.
    </title>
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
    <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>
 
</html>

Output: 

  • Before clicking on the button:

  • After clicking on the button:

 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!