In this article, we will see how to add/update an attribute to an HTML element in JavaScript. There are two approaches to modify an attribute of an HTML element in JavaScript, these are.
- Using setAttribute() Method
- Using HTML DOM Attributes Property
Approach 1: Using setAttribute() Method
It is used to add an attribute and provide it with a value to a specific element. If the attribute already exists, it just modifies or sets its value.Â
Syntax:Â
let elements = document.getElementById( "element_id" );
elements.setAttribute( "attribute", "value" );
Here we are initializing the element in JavaScript by getting its id and then using setAttribute() to modify its attribute.
Example: Below is the implementation of the above approach. Â
html
<!DOCTYPE html><html lang="en">Â
<head>Â Â Â Â <meta charset="UTF-8">Â Â Â Â <meta name="viewport" content=Â Â Â Â Â Â Â Â "width=device-width, initial-scale=1.0">Â
    <script>        function modify() {Â
            // Update style attribute of element "heading"            let heading = document.getElementById("heading");            heading.setAttribute("style", "color:green");Â
            // Add style attribute to element "tagLine"            let tagLine = document.getElementById("tagLine");            tagLine.setAttribute("style", "color:blue");        }    </script></head>Â
<body>    <h1 id="heading">        neveropen    </h1>Â
    <p id="tagLine">- Society Of Geeks</p>Â
    <button onclick="modify()">        Click to modify    </button></body>Â
</html> |
Output:Â
How to add/update an attribute to an HTML element using JavaScript?
Approach 2: Using HTML DOM Attributes Property
We can modify HTML attributes by using HTML DOM Attributes property.
document.getElementById("element_id").attribute_name = attribute_value;
Example: Below is the implementation of the above approach:Â Â
html
<!DOCTYPE html><html lang="en">Â
<head>Â Â Â Â <meta charset="UTF-8">Â Â Â Â <meta name="viewport" content=Â Â Â Â Â Â Â Â "width=device-width, initial-scale=1.0">Â
    <script>        function add() {Â
            // Get the values of fNum and sNum using getAttribute()            const fNum = Number(document.getElementById("fNum").value);            const sNum = Number(document.getElementById("sNum").value);            const result = fNum + sNum;Â
            // Output the result in green colour            const output = "Sum of two numbers is " + result;            document.getElementById("result").style = "color:green";            document.getElementById("result").innerHTML = output;        }    </script></head>Â
<body>    <h1 style="color:green;">        neveropen    </h1>Â
    <b>Enter first number :- </b>    <input type="number" id="fNum">    <br><br>Â
    <b>Enter second number :- </b>    <input type="number" id="sNum">    <br><br>         <button onclick="add()">Add</button>Â
    <p id="result"></p></body>Â
</html> |
Output:Â
How to add/update an attribute to an HTML element using JavaScript?
