HTML - DOM setAttribute() Method

Quiz

The HTML DOM setAttribute() method is used to add or update attributes for a specified element in the DOM. An attribute in HTML is a special characteristic or property of an HTML element that provides additional information about that element.

If the specified element does not exist, the method will not create the element; instead, it throws an error if you call this method on a non-existent element. To set attributes for an element, you must first ensure that the element must exist in the DOM.

The following interactive example demonstrate the usage of the setAttribute() method for different scenarios −

DOM setAttribute() Method

Welcome to Tutorialspoint..

You are at the right place to learn...

If you click the "Add" button, this method will add the "style" attribute to the first paragraph.
If you click the "Update" button, this method will update the existing "style" attribute for the first paragraph.

Syntax

Following is the syntax of the HTML DOM setAttribute() method −

element.setAttribute(attributeName, attributeValue);

Parameters

This method accepts two parameters as mentioned below −

Parameter	Description
attributeName	The name of the attribute you want to set or change.
attributeValue	The new value you want to define for the attribute.

Return Value

This method does not return any value.

Example 1: Setting Attribute for an HTML Element

The following program demonstrates the usage of the HTML DOM setAttribute() method to set the style to the <h2> element when the <button> is clicked −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM setAttribute()</title>
</head>
<body>
<p>Click the button below to change the color and font size of the heading:</p>
<h2 id="h">Welcome</h2>
<button onclick="changeColor()">Change Color</button>
<script>
   function changeColor() {
      const heading = document.getElementById('h');
      heading.setAttribute('style', 'color: red; font-size: 24px;');
   }
</script>
</body>
</html>

Example 2: Setting Inline Styles for Div Element

Following is another example of the HTML DOM setAttribute() method. We use this method to change the inline styles of an existing<div>by setting an attribute −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM setAttribute()</title>
<style>
   .container {
       padding: 20px; 
       border: 1px solid black;
       margin-bottom: 10px;
       color: blue;
       font-size: 18px;
    }
    button{
       padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<h4>Setting Inline Styles</h4>
<div id="ex" class="container">This div has inline Styles. Click below to change my Style!</div>
<button onclick="setInlineStyles()">Change Inline Styles</button>
<script>
   function setInlineStyles() {
      const ele = document.getElementById('ex');
      ele.setAttribute('style', 'color: green; font-size: 24px;');
   }
</script>
</body>
</html>

Example 3: Creating and Setting Attributes on a New Element

The example below shows the usage of the setAttribute() method by creating and setting attributes on a new element. It creates a new <div> element and appends it to the document body −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM setAttribute()</title>
<style>
   .container {
       padding: 20px;
       background-color: #f9f99f;
       border: 1px solid black;
    }
    button{
       padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<p>Creates and Sets Attributes on a New Element</p>
<button onclick="createAndSetAttributes()">Create New Element</button>
<script>
   function createAndSetAttributes() {
      const nd = document.createElement('div');
      nd.setAttribute('id', 'nd');
      nd.setAttribute('class', 'container');
      nd.textContent="This is a newly created div.";
      document.body.appendChild(nd);
   }
</script>
</body>
</html>

Example 4: Setting Class Attribute to Div Element

This example shows the usage of the setAttribute() method by adding a class attribute (highlight) to an existing <div> when clicking a button −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM setAttribute()</title>
<style>
    .container {
       padding: 20px;
       background-color: #f0f0ff;
       border: 1px solid black;
       margin-bottom: 10px;
    }
    .highlight {
       background-color: yellow;
    }
	button{
	   padding: 10px;
    }
</style>
</head>
<body>    
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<h4>Click button to apply class Attribute</h4>
<div id="ex" class="container">This div has class "container".</div>
<button onclick="addClass()">Add Class 'highlight'</button>
<script>
   function addClass() {
      const ele = document.getElementById('ex');
      ele.setAttribute('class','container highlight'); 
   }
</script>
</body>
</html>

Supported Browsers

Method
setAttribute()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page