Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • 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. 
 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 :