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

0 0 1 minute read

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">
        zambiatek
    </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;">
        zambiatek
    </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>