Open In App

How to Add an ID to Element in JavaScript ?

Last Updated : 18 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration.

Below are the possible approaches:

Using setAttribute()

In this approach, we are using JavaScript’s setAttribute() method to dynamically add an ID to an HTML element. Select the element using getElementsByTagName() and then set its ID attribute with the value obtained from user input.

Syntax:

Object.setAttribute(attributename,value)

Example: The below example uses setAttribute() to add an ID to an element in JavaScript.

HTML
<!DOCTYPE html>
<html>
  
<head>
    <title>Example 1</title>
    <style>
        body {
            text-align: center;
        }

        input {
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h3>
        Using setAttribute()
    </h3>
    <input type="text" placeholder="Enter ID">
    <button onclick="addFn()">
        Add ID
    </button>
    <script>
        function addFn() {
            const inputEle = 
                document.getElementsByTagName('input');
            const temp = inputEle[0];
            const val = temp.value;
            temp.setAttribute('id', val);
            alert('ID Added successfully!');
        }
    </script>
</body>

</html>

Output:

fosiGIF

Using Direct assignment to id property

In this approach, we are using JavaScript’s direct assignment to the element’s id property to dynamically add an ID. By selecting the element with document.querySelector() and assigning a value to its id property.

Syntax:

Selected_element.id = newID;

Example: The below example uses Direct assignment to id property to add an ID to an element in JavaScript.

HTML
<!DOCTYPE html>
<html>
  
<head>
    <title>Example 2</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h3>
        Using Direct assignment to 
        id property
    </h3>
    <button onclick="addId()">
        Add ID to h3
    </button>
    <script>
        function addId() {
            const h3Element = 
                document.querySelector('h3');
            h3Element.id = 'h3ID';
            alert('ID added to h3: ' + h1Element.id);
        }
    </script>
</body>

</html>

Output:

fosiGIF



Similar Reads

How to add a class to DOM element in JavaScript?
DOM (Document Object Model) is a way of manipulating the document (HTML document). This article will deal with how to access and set class names to the DOM elements. In DOM, all HTML elements are defined as objects. We will be using Javascript against CSS to manipulate them. Following are the properties of Javascript that we will be using to add a
2 min read
How to add an element horizontally in Html page using JavaScript?
There can be some cases where we have the requirement to add elements in a horizontal manner. Like, if your elements are linked list nodes and you want to add them horizontally. Now the question arises how we can do this in better way.One approach can be to use “display” property with the value “inline grid” as shown in the following program:When t
3 min read
How to add/update an attribute to an HTML element using JavaScript?
To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript. Below are the approaches used to add/update an attribute to an HTML element using JavaScript: Table of Content Using setAttribute() MethodUsing HTML D
2 min read
How to add an element to a JSON object using JavaScript ?
In JavaScript to add an element to a JSON object by simply assigning a value to a new key. We can use the approaches mentioned below. Let's first create a JSON object in JavaScript and then implement the possible approaches. C/C++ Code let jsonObject = { key1: 'value1', key2: 'value2' }; Examples to add an element to a JSON object using JavaScript1
3 min read
How to Add a new Element to HTML DOM in JavaScript ?
Adding a new element to the HTML DOM dynamically using JavaScript is a common requirement in web development. This allows developers to create interactive and dynamic web pages without the need to reload the entire page. There are several approaches to adding a new element to HTML DOM in JavaScript which are as follows: Table of Content Using creat
2 min read
How to add custom styles and ways to add custom styles in Tailwind-CSS ?
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough
3 min read
How to return true if the parent element contains the child element in JavaScript ?
In JavaScript, children property returns an array of those elements which are children of a given element. In order to check whether the parent element (say x) contains a child element (say y), we can use the children property to get the array of all children of x and then check whether the array obtained contains y. To get the child element of a p
2 min read
Which built-in method removes the last element from an array and returns that element in JavaScript ?
In this article, we will know how to remove the last element from an array using the built-in method in Javascript, along with understanding its implementation through the examples. There are a few Javascript built-in methods and techniques with which we can remove the last element of the array. We will focus only on the 2 methods ie., the pop() me
3 min read
How to Add Border to &lt;tr&gt; Element in CSS ?
In this article, we will see the different techniques to include the border to the &lt;tr&gt; Table element using CSS. There are 2 ways to apply the bottom border in the table in HTML. By implementing HTML onlyBy using HTML &amp; CSSWe will explore both approaches for including the border to the &lt;tr&gt; element, &amp; will understand them throug
4 min read
How to add a box-shadow on one side of an element using CSS?
The box-shadow property is used to set the box shadow on one side of element. Syntax: box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the sha
2 min read