Add ID to Element Using JavaScript
The id attribute plays a vital role in JavaScript, which relates to a certain element suitable with the getElementById() function. The id must be unique in the HTML page because they help get the HTML element’s values and content later.
With the importance of the id attribute, this tutorial teaches how to add the id attribute to a pre-existing or new HTML element using JavaScript.
Use setAttribute() Function to Add id to an Element in JavaScript
For pre-existing and new HTML elements, setAttribute() function and .id property is used. The setAttribute() takes two parameters.
The first is the attribute name, and the second is the attribute’s value. For instance, the first parameter would be id , and the second can be any string to add the id attribute to that particular element.
On the other hand, we can directly assign the id attribute’s value to the .id property. We will use the following HTML startup code to add an id to a pre-existing and new element.
Add id to Pre-Existing Element Using JavaScript
We used two ways in the above code to add the id attribute. First is setAttribute() method and the second is .id property.
Firstly, we get the element whose id’s value is firstParagraph , use the setAttribute() function to set a new value of the id attribute, and print on the console to confirm that it is changed.
Now, the id is changed from firstParagraph to firstPracPara . Let’s change it again by using the .id property.
The latest value of id is newPracPara ; printed it also on the console to confirm. You can see the above output.
Add id to New Element Using JavaScript
Here, we are creating a new element first using createElement() function and then use setAttribute() method and .id property to add id .
Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.
How to Get & Set the ID of an element with JavaScript and jQuery
In this tutorial, we will learn how to get and set the ID attribute of any HTML element using pure JavaScript and jQuery.
Get Element ID with JavaScript
To get the ID attribute of an element we can access the id DOM property. Let's get all the inputs on a page, loop through them and get each of their ID's.
Set Element ID with JavaScript
To set the ID attribute of an element, assign a new value to the id property using the assignment operator ( = ).
Get Element ID with jQuery
To get the ID attribute of an element with jQuery use the built-in attr() method.
Set Element ID with jQuery
To set a new ID value to an element using jQuery, pass the new value as the second argument of the attr() method.
Conclusion
You now know how to set and get the ID attribute of any element using pure JavaScript and with a jQuery abstraction layer.
Как добавить идентификатор к элементу в JavaScript
Идентификаторы важны в JavaScript. Они относятся к конкретному элементу, совместимому с методом getElementById ( ), который возвращает его с заданным свойством.
Идентификаторы должны быть уникальными на странице, и все элементы на странице должны иметь идентификатор, даже если в этом нет необходимости.
Вы можете добавить идентификатор к новому элементу JavaScript или уже существующему элементу HTML.
How to create HTML elements with ID and class using JavaScript?
In this JavaScript post, I demonstrated how to create HTML elements using JavaScript.
But many times, we need to create elements with class and id attributes so that we can target those newly created elements.
We can use setAttribute() Method to set id and class attributes.
setAttribute() Method
This method adds the defined attribute to an HTML element, and also adds a defined value to it.