Horje
How to Add an ID to Element in JavaScript ?

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()

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


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript Array toSorted() Method JavaScript Array toSorted() Method
JavaScript Array toReversed() Method JavaScript Array toReversed() Method
What is the Infinity Global Property in JavaScript ? What is the Infinity Global Property in JavaScript ?
JavaScript Array with() Method JavaScript Array with() Method
How to Filter an Array in JavaScript ? How to Filter an Array in JavaScript ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje