setAttribute and removeAttribute

Learn to add, change and remove attributes.

Adding attributes with setAttribute

To add or change an attribute on an HTML element, you use the setAttribute method. The first parameter is the attribute name and the second is its value.

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

If the attribute already exists, its value is changed; if not, it is added. This method always writes attribute values as strings.

getAttribute and removeAttribute

To read an attribute you use getAttribute; to delete it you use removeAttribute. Both take the attribute name as a single parameter.

const link = document.querySelector('a');
console.log(link.getAttribute('href'));
link.removeAttribute('target');

Reading a missing attribute returns null; removing a missing one does not throw. Together with setAttribute, these three methods let you manage attributes comfortably.

Exercise Set href on the link

The link variable points to an <a> element. Use setAttribute to set href to 'https://example.com'. Then remove the target attribute.

Show example solution

link.setAttribute('href', 'https://example.com');
link.removeAttribute('target');

Test yourself

Which sets type='email' on the input?

const input = document.querySelector('input');
// A
input.setAttribute('email', 'type');
// B
input.attribute('type', 'email');
// C
input.setAttribute('type', 'email');
// D
input.setAttribute('type', email);

Show answer

C — Correct! First the name, then the value: setAttribute('type', 'email').

Set the src attribute

const img = document.querySelector('img');
img.____('src', 'logo.png');

Show answer

const img = document.querySelector('img');
img.setAttribute('src', 'logo.png');

Match methods

setAttribute('id', 'x')

Writes an attribute
getAttribute('id')

Reads the attribute
removeAttribute('id')

Removes the attribute

Next lesson: innerHTML and insertAdjacentHTML

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies