How to Set Attribute in JavaScript: Simple Guide

To set an attribute on an HTML element in JavaScript, use the setAttribute method like element.setAttribute('attributeName', 'value'). This changes or adds the specified attribute to the element dynamically.

Syntax

The setAttribute method takes two arguments: the name of the attribute you want to set, and the value you want to assign to it.

• element: The HTML element you want to modify.
• attributeName: The name of the attribute as a string (e.g., "class", "id", "src").
• value: The value you want to give to the attribute.

javascript

element.setAttribute(attributeName, value);

Example

This example shows how to set the src attribute of an image and the class attribute of a div element.

javascript

const img = document.createElement('img');
img.setAttribute('src', 'https://example.com/image.png');
img.setAttribute('alt', 'Example Image');

const div = document.createElement('div');
div.setAttribute('class', 'container');

console.log(img.outerHTML);
console.log(div.outerHTML);

Output

<img src="https://example.com/image.png" alt="Example Image">
<div class="container"></div>

Common Pitfalls

One common mistake is trying to set attributes directly as properties when the attribute name differs from the property name. For example, setting element.class instead of element.className won't work as expected.

Also, using setAttribute with incorrect attribute names or forgetting quotes around strings can cause errors.

javascript

/* Wrong way: */
const div = document.createElement('div');
div.class = 'my-class'; // This does not set the class attribute

/* Right way: */
div.className = 'my-class'; // Sets the class property
// or
// div.setAttribute('class', 'my-class'); // Sets the class attribute

Quick Reference

Method	Description	Example
setAttribute	Sets or changes an attribute on an element	element.setAttribute('id', 'main')
getAttribute	Gets the value of an attribute	element.getAttribute('id')
removeAttribute	Removes an attribute from an element	element.removeAttribute('id')
property assignment	Sets properties directly (works for some attributes)	element.id = 'main'

Key Takeaways

Use element.setAttribute('name', 'value') to set or change any attribute on an HTML element.

Remember that some attributes have corresponding properties (like className for class) that can be set directly.

Avoid using incorrect attribute names or property names to prevent bugs.

setAttribute works for all attributes, including custom ones.

Use getAttribute and removeAttribute to read or remove attributes respectively.