How to Add an ID to Element in JavaScript ? Last Updated : 18 Mar, 2024 Comments Improve Suggest changes Like Article Like 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: Table of Content Using setAttribute()Using Direct assignment to id propertyUsing 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: Using Direct assignment to id propertyIn 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: Comment More infoAdvertise with us Next Article How to Add an ID to Element in JavaScript ? G gauravggeeksforgeeks Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Select an Element by ID in JavaScript ? In JavaScript, we can use the "id" attribute to interact with HTML elements. The "id" attribute in HTML assigns a unique identifier to an element. This uniqueness makes it easy for JavaScript to precisely target and manipulate specific elements on a webpage. Selecting elements by ID helps in dynamic 2 min read How to Add a Class to DOM Element in JavaScript? Adding a class to a DOM (Document Object Model) element in JavaScript is a fundamental task that enables developers to dynamically manipulate the appearance and behavior of web pages. Classes in HTML provide a powerful way to apply CSS styles or JavaScript functionality to multiple elements at once. 2 min read How to create an element from a string in JavaScript ? In this article, we will learn how to create an element from a string using JavaScript. This can be used in situations where dynamically generated elements are required by the user. This can be achieved using many approaches as given below: Table of Content Using the createElement() methodUsing the 3 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read How to dynamically create new elements in JavaScript ? New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method. The examples given below would demonstrate this approach. Example 1: In this example, a newly created element is added as a 4 min read How to Add an Input Field on Button Click in JavaScript ? JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically 2 min read How to get all ID of the DOM elements with JavaScript ? Given a HTML document and the task is to get the all ID of the DOM elements in an array. There are two methods to solve this problem which are discusses below: Approach 1: First select all elements using $('*') selector, which selects every element of the document.Use .each() method to traverse all 2 min read How to add HTML elements dynamically using JavaScript ? We learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and JavaScript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example. Below are the approaches used to add HTML elements dy 2 min read How to dynamically insert id into table element using JavaScript ? This article explains how to dynamically insert "id" into the table element. This can be done by simply looping over the tables and adding "id"s dynamically. Below are the approaches used to dynamically insert id into table elements using JavaScript: Table of Content Using classList ObjectUsing clas 3 min read Like