How to Add an ID attribute to an Element in JavaScript

# Add an ID attribute to an Element using JavaScript

To add an id attribute to an element:

Select the element using the document.querySelector() method.
Use the setAttribute() method to add an id attribute to the element.

Here is the HTML for the examples.

index.html

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

  <body>
    <div class="box">Example content</div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

// 👇️ set `id` attribute on the element
box.setAttribute('id', 'box');

add an id attribute to an element

The code for this article is available on GitHub

We used the document.querySelector() method to select the element by its class.

The method returns the first element within the document that matches the provided selector.

If no element matches the selector, the method returns null.

If you need to handle a scenario where the element is not found in the DOM, use the optional chaining (?.) operator when invoking the setAttribute() method to avoid getting an error.

index.js

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

// 👇️ set `id` attribute on the element
box?.setAttribute('id', 'box');

If the box variable stores a null value, the optional chaining (?.) operator will short-circuit returning undefined, instead of trying to call the setAttribute method on a null value.

We used the setAttribute() method to set the id attribute on the 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 you need to get the value of the attribute, use the getAttribute() method.

index.js

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

// 👇️ set `id` attribute on the element
box?.setAttribute('id', 'box');

// 👇️ "box"
console.log(box.getAttribute('id'));

getting the attribute with getattribute method

The code for this article is available on GitHub

You might see examples online that directly set the id property on the element.

index.js

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

box.id = 'box';

// 👇️ "box"
console.log(box.getAttribute('id'));

This is also a perfectly valid approach.

If I open my browser with the code from the example, I can see that the id attribute is set on the element.

id attribute set

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Add an ID attribute to an Element in JavaScript

# Add an ID attribute to an Element using JavaScript

# Additional Resources

Borislav Hadzhiev