Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

dom
communitycreator

What is the setAttribute() method in DOM?

Ayush Trivedi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

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.

RELATED TAGS

dom
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring