How to add/update an attribute to an HTML element using JavaScript? Last Updated : 03 Jan, 2024 Comments Improve Suggest changes Like Article Like Report 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: Table of Content Using setAttribute() MethodUsing HTML DOM Attributes PropertyApproach 1: Using setAttribute() MethodIt 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?Approach 2: Using HTML DOM Attributes PropertyWe 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? Comment More infoAdvertise with us Next Article How to add/update an attribute to an HTML element using JavaScript? A AshaRamMeena Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions 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 How to append HTML code to a div using JavaScript ? The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely used—over 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web 6 min read How to change style attribute of an element dynamically using JavaScript ? Given an HTML document and the task is to change the style properties (CSS Properties) of an element dynamically with the help of JavaScript. Approach: Using element.style PropertyThe element.style property is represented by the CSSStyleDeclaration object, which is returned via the style property. S 2 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read JavaScript - How to Get the Data Attributes of an Element? Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data 2 min read How To Set Custom Attribute Using JavaScript? In modern web development manipulating HTML elements dynamically is a common requirement. One such task is setting custom attributes on elements to store additional data or metadata. Custom attributes referred to as data attributes allow developers to attach extra information to elements. In this ar 2 min read Like