How to add/update an attribute to an HTML element using JavaScript? Last Updated : 03 Jan, 2024 Summarize Comments Improve Suggest changes Share 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 append data to 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 Like