JavaScript: Jak dodać atrybut do elementu HTML?

Załóżmy, że potrzebujesz za pomocą kodu dodać atrybut do elementu HTML.

Ustawmy atrybut: aria-label. W tym wpisie opiszę dwa sposoby jak można to zrobić.

Sposób 1: setAttribute

Pierwszy sposób jest bardzo prosty: wywołujemy na elemencie któremu chcemy ustawić atrybut funkcję: setAttribute. Przykład:

const buttonEl = document.querySelector('#my-button');
buttonEl.setAttribute('aria-label', 'Some button');

Pobieramy referencę do elementu HTML i ustawiamy wartość atrybutowi.

Sposób 2: createAttribute i setAttributeNode

Druga metoda jest trochę bardziej rozbudowana:

const buttonEl = document.querySelector('#my-button');
const attribute = document.createAttribute('aria-label');
attribute.value = 'Some button 2';
buttonEl.setAttributeNode(attribute);

Najpierw za pomocą funkcji: createAttribute tworzymy atrybut. Nadajemy mu wartość, a na koniec za pomocą: setAttributeNode przypisujemy atrybut do elementu. Pierwsza metoda jest jednak wygodniejsza ;)