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?