How to Add ID to Element Using JavaScript

In JavaScript, the “id” attribute is significant because it identifies a specific element that can be found using the “getElementById()” method. The id in the HTML page needs to be unique because it is used later to access the HTML element’s values and the related content.

This post will describe the procedure for adding an Id to an element in JavaScript.

How to Add ID to Element Using JavaScript?

To add the id to an element, the “setAttribute()” method is used. It requires two parameters, the “name” of the attribute is the first parameter, such as “id” and its value is a second parameter, such as “abc”.

Syntax

The given syntax id used for the setAttribute() method:

element.setAttribute("id", "value")

There are two ways for adding an Id to an element in JavaScript:

Add id by creating a new element using JavaScript
Add id to the existing HTML element in JavaScript

The given examples will demonstrate both ways one by one!

Example 1: Add ID by Creating New Element in JavaScript Using setAttribute() Method

In this example, we will create an HTML heading by JavaScript and set its id and the innerText for the DOM element.

In the JavaScript file, create an HTML element “h3” using the “createElement()” method:

const element = document.createElement('h3');

Set the unique id to the heading using the “setAttribute()” method:

element.setAttribute("id", "heading");

Here, the method takes two arguments:

The “id” is the first argument that is the attribute name.
The “heading” is the value of the id as a second attribute.

Get the reference of the HTML body tag using the “querySelector()” method:

var body = document.querySelector('body');

Add the heading “h3” to the body, using the “appendChild()” method by passing the element as an argument:

body.appendChild(element);

Now, set the text for the element that will show on the DOM using the “getElementsByTagName()” with the “innerHTML” property:

document.getElementsByTagName("h3")[0].innerHTML="Welcome to Linuxhint!";

Output

The output signifies that the heading is successfully created with its id that is set by using the “setAttribute()” method.

Example 2: Add ID to Existing Element Using setAttribute() Method

Let’s try to add a new id to the existing HTML element in JavaScript.

In an HTML file, create a heading with <h3> tag and assign an id to it using the “id” attribute:

<h3 id="heading">Welcome to Linuxhint!</<strong>h3</strong>>

The corresponding HTML output will be:

Now, in the JavaScript file, first, get the reference of the element using its assigned id with the help of the “getElementById()” method and store it in a variable “setId”:

var setId = document.getElementById("heading");

Set the new id “heading1” to the element using the “setAttribute()” method:

setId.setAttribute("id","heading1");

Output

The above output indicates that the id of the HTML element heading is now “heading1” which is set by the JavaScript “setAttribute()” method.

Conclusion

For adding an id to an element, use the JavaScript “setAttribute()” method. There are two ways for adding an id to an element in JavaScript, add an id by creating a new element or add an id to the existing HTML element in JavaScript. This post described the procedure for adding an ID to an element in JavaScript.

How to Add ID to Element Using JavaScript