Skip to content
Related Articles

Related Articles

How to add/update an attribute to an HTML element using JavaScript?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 01 Sep, 2021

We can use two approaches to modify an attribute of an HTML element using JavaScript.
Approach 1: 
We can use the inbuilt setAttribute() function of JavaScript.
Syntax: 
 

var elementVar = document.getElementById("element_id");
elementVar.setAttribute("attribute", "value");

So what basically we are doing is initializing the element in JavaScript by getting its id and then using setAttribute() to modify its attribute.
Example: Below is the implementation of above approach. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Modify attributes method 1</title>
    <script>
        function modify() {
 
            //update style attribute of element "heading"
 
            var heading = document.getElementById("heading");
            heading.setAttribute("style", "color:green");
 
            //add style attribute to element "tagLine"
 
            var tagLine = document.getElementById("tagLine");
            tagLine.setAttribute("style", "color:blue");
        }
    </script>
</head>
 
<body>
 
    <h1 style="color:black"
        id="heading"
        align="center">
      GeeksForGeeks
  </h1>
 
    <p id="tagLine" align="center"> - Society Of Geeks
        <br>
        <br>
        <button onclick="modify()"> Click to modify </button>
    </p>
 
</body>
 
</html>

Output: 
 

  • Before clicking the button: 
     

  • After clicking the button: 
     

 

Approach 2:

We can modify HTML attributes even without using setAttribute() function as follows : 
 

document.getElementById("element_id").attribute = attribute_value;

Example: Below is the implementation of above approach: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Modify attributes method 2</title>
    <script>
        function add() {
 
            //get the values of fNum and sNum using getAttribute()
 
            var fNum = Number(document.getElementById("fNum").value);
            var sNum = Number(document.getElementById("sNum").value);
            var result = fNum + sNum;
 
            //output the result in green colour
            var output = "Sum of two numbers is " + result;
            document.getElementById("result").style = "color:green";
            document.getElementById("result").innerHTML = output;
 
            /*note the way we have updated innerHTML and added style
              attribute of "result" element */
 
        }
    </script>
</head>
 
<body>
 
    <h1 style="color:green" align="center">GeeksForGeeks</h1>
 
    <p align="center">
        <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>
        <b><p id="result" align="center"></p>
</b>
 
    </p>
 
</body>
 
</html>

Output: 
 

  • Before clicking the button: 
     

  • After clicking the button: 
     

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!