#    
## Overview
In this shot, we will learn how to add a new attribute and its value in an HTML element.

The **`setAttribute()`** method sets the attribute and its value (passed as a parameter) to the element it is applied on.

If there is already an attribute with the same name, `setAttribute()` will change or replace the value.

## Syntax

element.setAttribute(Attr_Name, Attr_Value)

#    
## Parameters

* `Attr_Name`: The name of the attribute we want to add to the element, i.e., `class`. 
* `Attr_Value`: The value for the specified attribute.

## Code
Let us write a code to set an attribute and its value to an element.

<!DOCTYPE html>
<html>
<head>
<style>
.new {
  color: yellow;
}
</style>
</head>
<body>

<div id='div'>Hello Educative</div>

<p>To set/add 'class' attribute to the above element click the button.</p>

<button onclick="change()">Click Here!</button>

<script>
function change() {
  var n = document.getElementById("div");
  n.setAttribute('class','new');
}
</script>

</body>
</html>

</html>

codemirror

#    
## Code explanation
* In line `5`, we set the color property of the CSS class `new` to ‘yellow’.
* In line `12`, we have a `DIV` element with id `div`, to which we will add the new CSS.
* In line `14`, we have a paragraph tag with text.
* In line `16`, we write a button tag with a `change()` function that will be called when the user clicks on it.
* In line `19`, we write the JavaScript code in the script tag. We define a `change()` function that will be called when a user clicks on the button from the HTML page.
* In line `20`, we use `getElementById()` and pass id `div` to get the `div` element.
* In line `21`, we use the `setAttribute()` method on the element object above to add the new attribute and its value in the `DIV` element.

## Output
When we click the button, the color of the `DIV` element changes, which means the new CSS class has been successfully added to the selected `DIV` element.

What is the setAttribute() method in DOM?

The setAttribute() method assigns or updates an attribute and its value on an HTML element.