Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 30 Jan, 2020

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 the 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.




<!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.




<!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(targt, sourc) {
            [...sourc.attributes].forEach(attr => {
                targt.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 :