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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Modify attributes method 1</title>
    <script>
        function modify() {
  
            //update style attrribute 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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.