Copy all Attributes from one Element to Another using JS

Copy all Attributes from one Element to Another using JS #

To copy all attributes from one element to another:

Convert the source's attributes to an array using the Array.from() method.
Use the forEach() method to iterate over the array.
Use the setAttribute() method to set each attribute on the target element.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="
        background-color: salmon;
        color: white;
        width: 150px;
        height: 150px;
        margin: 10px;
      "
      title="box"
    >
      Box content
    </div>

    <div id="another">Another Box</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
function copyAttributes(source, target) {
  return Array.from(source.attributes).forEach(attribute => {
    target.setAttribute(
      attribute.nodeName === 'id' ? 'data-id' : attribute.nodeName,
      attribute.nodeValue,
    );
  });
}

const box = document.getElementById('box');
const another = document.getElementById('another');

copyAttributes(box, another);

We created a reusable function that copies all the attributes from one element to another.

The Element.attributes property returns a Map of strings representing the element's attributes.

index.js

Copied!
const box = document.getElementById('box');
console.log(box.attributes); // 👉️ {0: id, 1: style, 2: title}

We used the Array.from method to get an array containing the attribute names.

index.js

Copied!
const box = document.getElementById('box');

// 👇️ [id, style, title]
console.log(Array.from(box.attributes));

The function we passed to the forEach method gets called with each element (attribute name) in the array.

On each iteration, we check if the attribute name is not equal to id before assigning it to the target element.

The values of the id attribute have to be unique on the page, so it wouldn't make sense to copy the id over.

We used a ternary operator to check if the attribute's name is equal to id.

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark evaluates to a truthy value, the value to the left of the colon is returned, otherwise the value to the right is returned.

The nodeName property returns the qualified name of the attribute.

The nodeValue property returns the value of the attribute.

We used the setAttribute method to set each attribute on the target element.

The setAttribute method takes 2 parameters:

name - the name of the attribute whose value is to be set.
value - the value to assign to the attribute.

If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified name and value.

If I load the code from the example in my browser, I can see that the attributes have been copied over to the target element successfully.

Attributes copied over

Notice that the id of the element remains the same, it hasn't been copied over.

And the elements now look identical.

elements look identical

However, this wouldn't be the case if the source element has styles that are applied to it with an external style sheet.

If you need to copy ALL styles from one element to another, check out my other article - Copy all Styles from one Element to Another using JS.

Copy all Attributes from one Element to Another using JS

Copy all Attributes from one Element to Another using JS #

Borislav Hadzhiev