How To Set Custom Attribute Using JavaScript? Last Updated : 05 Sep, 2024 Comments Improve Suggest changes Like Article Like Report 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 article, we will see various methods to set custom attributes using JavaScript.Why use Custom Attribute?Custom Attributes are useful because they allow you to store information directly in your HTML elements. You can easily access and change these attributes using JavaScript.They can help manage dynamic changes on your web pages, like tracking a user's actions.PrerequisitesHTMLCSS JavaScriptThese are the approaches to set custom attributes using JavaScript:Table of ContentUsing the setAttribute() methodUsing element.attributeName syntax1. Using the setAttribute() methodIn this approach, we will use the setAttribute() method which is a simple way to set any attribute including custom attributes, on an HTML element. This method allows us to specify the attribute name and value as strings.Syntax:element.setAttribute('data-custom-attribute', 'value');Example: In this example we are using the setAttribute() method to set custom attribute using JavaScript and then retire its value. JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Set Custom Attribute</title> </head> <body> <div id="myElement">Welcome to GeeksForGeeks!</div> <script> const element = document.getElementById('myElement'); element.setAttribute('data-info', 'customValue'); console.log(element.getAttribute('data-info')); </script> </body> </html> Output:Open console to see outputcustomValue2. Using element.attributeName syntaxWe can also set custom attributes by directly assigning values to the attribute name using dot notation. However, this approach is less common and is typically used for standard attributes rather than custom ones.Syntax:element.customAttribute = 'value';Example: In this example we are using element.attributeName syntax to set custom attribute using JavaScript. JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Set Custom Attribute</title> </head> <body> <div id="myElement"> Welcome to GeeksForGeeks!</div> <script> const element = document.getElementById('myElement'); element.dataInfo = 'customValue'; console.log(element.dataInfo); </script> </body> </html> Output:Open console to see outputcustomValue Comment More infoAdvertise with us Next Article How To Set Custom Attribute Using JavaScript? yuvrajghule281 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to get Attribute Value from XML using JavaScript? To get the attribute values from XML in JavaScript, We can use DOM manipulation or XPath querying and even use regular expressions to efficiently retrieve attribute values from XML documents. Below are the approaches to get attribute value from XML with Java Script: Table of Content Using DOM Parser 3 min read How to remove âdisabledâ attribute from HTML input element using JavaScript ? In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. Th 2 min read How to add/update an attribute to an HTML element using JavaScript? 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 2 min read How to set attribute value in Cypress ? In Cypress, you may need to modify or set the value of an element's attribute during a test. This can be useful for dynamically updating the state of an element or manipulating the DOM to simulate different scenarios. You can set attribute values using jQuery methods like .attr() or Cypress's native 2 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 create editable div using JavaScript ? In this article, we will be explaining to you how to create an editable div using HTML, CSS, and JavaScript. An editable div is one on which is you will click then it will generate an editable text area to edit or to write any text on your browser itself. After editing, when you click on somewhere e 3 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 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 attribute without value using jQuery ? There are many ways to set attributes without value using jQuery. jQuery prop() method is used to get or set the values of attributes. To change the properties like checked, default checked, disabled, selectedIndex, default selected and selected state of Document Object Model, use the jQuery .prop() 2 min read How to create XML Dynamically using JavaScript? XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to create XML Dynamically using JavaScript: Table of Content Usi 2 min read Like