Add An ID Attribute To An Element Using JavaScript

This article will show you the three most straightforward ways to add an ID attribute to an element using JavaScript. Let’s learn more about them together!

How to add an ID attribute to an element using JavaScript?

If you already have basic knowledge of DOM and DOM manipulation in JavaScript, you will no doubt be familiar with the methods we cover below.

Using the setAttribute() function.

The setAttribute() function in JavaScript is a method of an element object. This method sets the specified attribute value of an element. If the attribute value already exists, it will be updated, and if it did not exist before, the new attribute will be set to the element.

Syntax:

element.setAttribute(attribute, value)

Parameter:

• element: The element that needs to set properties
• attribute: The name of the attribute you want to add to the element
• value: The value to be set for the attribute

Look at the example below to see how to use the setAttribute() function.

<main>
	<h1 class="heading">Hello, this is LearnshareIT</h1>
</main>

#heading-primary {
    font-size: 2rem;
    color: orangered;
}

const h1 = document.querySelector('.heading');

// Add 'id' to h1 element
h1.setAttribute('id', 'heading-primary');

Output:

In the above JS code, we get the element by class name and assign it an id using the setAttribute() function. As you can see, an id="heading-primary" was actually created in the h1 element.

Using the ‘id‘ property.

Every DOM element has an id attribute. We use the id property to set or get the id for an element.

Syntax:

element.id

Parameter:

• element: The element you need to use id attribute

Description:

It is used to get or set the id attribute for element. If used to get, the result will be a id string.

Take a look at the code sample below.

<main>
  	<h2 class="heading">Hello, this is LearnshareIT</h2>
</main>

#heading-secondary {
    font-size: 1.7rem;
    color: blueviolet;
}

const h2 = document.querySelector('.heading');

// Add 'id' to h2 element
h2.id = 'heading-secondary';

Output:

An id="header-secondary" has been added to h2 element only using the id property.

Using the attr() function in jQuery.

jQuery is a compact and powerful JS library. It makes manipulating the DOM easier. The attr() function in jQuery helps us to add an id to an element similar to the setAttribute() function, but more concise.

Syntax:

attr(attribute, value)

Parameters:

• attribute: The attribute you want to add
• value: The value of that attribute

Notice: Remember to install jQuery here before using it.

Now, look at the below example to understand how to use attr() in jQuery.

<main>
  	<h3 class="heading">Hello, this is LearnshareIT</h3>
</main>

#heading-tertiary {
    font-size: 1.5rem;
    color: goldenrod;
}

// Add 'id' to heading element
$('.heading').attr('id', 'heading-tertiary');

Output:

We do not need to do the get element step in this case. Just type the selector in parentheses after the $ character. It’s more concise than the above two methods.

Summary

We have shown you how to add an id attribute to an element using JavaScript. If you find this article interesting, don’t forget to share it with your friends. Thank you for reading!

Maybe you are interested:

• Get Elements by multiple Class Names in JavaScript
• Set the Width and Height of an Element using JavaScript
• Set the “required” Attribute using JavaScript

Cora Lopez

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.

---

Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java