How to add/update an attribute to an HTML element using JavaScript?
Last Updated :
03 Jan, 2024
To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript.
Below are the approaches used to add/update an attribute to an HTML element using JavaScript:
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: In this example, we are using setAttribute() Method.
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">
GeeksforGeeks
</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?We can modify HTML attributes by using HTML DOM Attributes property.
Syntax:
document.getElementById("element_id").attribute_name = attribute_value;Example: In this example, we are using HTML DOM Attributes Property.
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;">
GeeksforGeeks
</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?
Similar Reads
How to add HTML elements dynamically using JavaScript ? We learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and JavaScript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example. Below are the approaches used to add HTML elements dy
2 min read
How to Add Attributes to an HTML Element in jQuery? To add attributes to an HTML element in jQuery, the attr() method can be used. This allows to set one or more attributes for a selected element, such as id, class, src, and href.Approach: Given an HTML document containing <label>, <input>, and <button> elements. The <input> e
1 min read
How to replace an HTML element with another one using JavaScript? Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st
2 min read
How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit
2 min read
How to append data to <div> element using JavaScript ? To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div.
1 min read