HTML DOM Element setAttribute()
The setAttribute() method sets a new value to an attribute.
If the attribute does not exist, it is created first.
See Also:
Tutorial:
Syntax
Parameters
| Parameter | Description |
| name | Required. The name of the attribute. |
| value | Required. The new attribute value. |
Return Value
It is possible to add a style attribute with a value to an element, but it is not recommended because it can overwrite other properties in the style attribute.
More Examples
Change an input field to an input button:
Add a href attribute to an <a> element:
Change the value of the target attribute to «_self»:
Browser Support
element.setAttribute() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Element: setAttribute() method
Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
To get the current value of an attribute, use getAttribute() ; to remove an attribute, call removeAttribute() .
Syntax
Parameters
A string specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when setAttribute() is called on an HTML element in an HTML document.
A string containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string.
Boolean attributes are considered to be true if they’re present on the element at all. You should set value to the empty string ( «» ) or the attribute’s name, with no leading or trailing whitespace. See the example below for a practical demonstration.
Since the specified value gets converted into a string, specifying null doesn’t necessarily do what you expect. Instead of removing the attribute or setting its value to be null , it instead sets the attribute’s value to the string «null» . If you wish to remove an attribute, call removeAttribute() .
Return value
Exceptions
The specified attribute name contains one or more characters which are not valid in attribute names.
Examples
In the following example, setAttribute() is used to set attributes on a <button> .
How to add/update an attribute to an HTML element using JavaScript?
I’m trying to find a way that will add / update attribute using JavaScript. I know I can do it with setAttribute() function but that doesn’t work in IE.
4 Answers 4
You can read here about the behaviour of attributes in many different browsers, including IE.
element.setAttribute() should do the trick, even in IE. Did you try it? If it doesn’t work, then maybe element.attributeName = ‘value’ might work.
What seems easy is actually tricky if you want to be completely compatible.
Let’s say you have an id of ‘div1’ to add. These will all work except the last in IE 5.5 (which is ancient history at this point but still is XP’s default with no updates).
But there are contingencies, of course. Will not work in IE prior to 8: e.attributes[‘style’] Will not error but won’t actually set the class, it must be className: e[‘class’] .
However, if you’re using attributes then this WILL work: e.attributes[‘class’]
In summary, think of attributes as literal and object-oriented.
In literal, you just want it to spit out x=’y’ and not think about it. This is what attributes, setAttribute, createAttribute is for (except for IE’s style exception). But because these are really objects things can get confused.
Since you are going to the trouble of properly creating a DOM element instead of jQuery innerHTML slop, I would treat it like one and stick with the e.className = ‘fooClass’ and e.id = ‘fooID’. This is a design preference, but in this instance trying to treat is as anything other than an object works against you.
It will never backfire on you like the other methods might, just be aware of class being className and style being an object so it’s style.width not style=»width:50px». Also remember tagName but this is already set by createElement so you shouldn’t need to worry about it.
This was longer than I wanted, but CSS manipulation in JS is tricky business.
Изменения в DOM
Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы createElement() и createTextNode() , а также node.textContent и node.innerHTML .
Создание новых узлов
В этом разделе работаем со следующим HTML:
Открываем вкладку Console в панели разработчика.
Воспользуемся методом createElement() в объекте document для создания нового элемента p .
Успешно! Переменная paragraph выдает p элемент.
Теперь можно добавить текст к нашему элементу со свойством textContent :
Таким образом, комбинируя createElement() и textContent , можно создавать узлы-элементы.
Также можно использовать свойство innerHTML , чтобы добавлять содержимое внутрь элемента:
Из двух рассмотренных методов textContent лучше — он немного быстрее, чем innerHTML .
Текстовый узел можно создать также с помощью метода createTextNode() :
Все эти методы создают новые элементы и текстовые узлы, однако они не видны на интерфейсе веб-сайта, пока не вставлены в document !
Вставка узлов в DOM
Чтобы увидеть созданные нами текстовые узлы и элементы на интерфейсе, нужно вставить их в document . Методы appendChild() и insertBefore() используются для добавления элементов в начало, середину или конец родительского элемента, а replaceChild() используется для замены старого узла на новый.
Продемонстрируем это, добавив список к нашему HTML:
Вот наша страница:
Скажем, мы хотим добавить новый пункт в конец списка. Сперва нам нужно создать элемент и добавить к нему текст, как мы делали раньше:
Теперь у нас есть элемент для нового списка! Добавляем его в конец списка, используя appendChild() :
И новый элемент li добавлен в конец ul :
Чтобы добавить пункт в начало списка, создадим другой элемент (мы должны создать новый элемент, потому что createElement() нельзя использовать повторно):
Используем метод insertBefore() , чтобы добавить элемент в начало списка. В нем будет два аргумента: первый будет новым добавленным дочерним узлом, а второй — соседним узлом, следующим сразу за дочерним.
Так мы добавим новый элемент anotherNewItem в начало списка:
Теперь новый узел добавлен в начало списка!
Давайте теперь посмотрим, как можно заменить существующий узел новым, используя replaceChild() . Во-первых, создаем новый элемент:
Метод replaceChild() также содержит два аргумента: новый узел и узел, который нужно заменить:
В нашем примере заменяем третий дочерний элемент списка:
Используя комбинацию методов appendChild() , insertBefore() и replaceChild() узлы и элементы можно вставлять в DOM где угодно!
Удаление узлов из DOM
Для удаления узлов из DOM используем removeChild() (чтобы удалить дочерние узлы), или remove() , чтобы удалить сам узел.
Возвращаясь к нашему примеру, давайте удалим последний пункт списка:
В качестве альтернативы можно использовать remove() , чтобы удалить сам узел:
Используя removeChild() и remove() , можно удалить любые узлы из DOM.
Изменение атрибутов
Атрибуты часто используются в HTML для предоставления дополнительной информации об элементе. Некоторые распространенные примеры: атрибут src тега img , href тега a , а также class , id и style . Встречаются атрибуты, начинающиеся с data- — это пользовательские атрибуты, которые тоже можно изменять.
Вот методы, которые используются в JavaScript для изменения атрибутов:
hasAttribute() — возвращает булев тип.
getAttribute() — возвращает значение определенного атрибута.
setAttribute() — добавляет или обновляет значение определенного атрибута.
removeAttribute() — удаляет атрибут из элемента.
В качестве примера используем данный HTML:
Откроем console и протестируем методы атрибутов:
Давайте используем setAttribute() , чтобы назначить новое изображение src :
Методы hasAttribute() and getAttribute() часто используются с условными операторами, в то время как setAttribute() и removeAttribute() чаще используются для изменения DOM напрямую.
Изменение классов
В работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как можно работать с атрибутом класса в JavaScript, используя className и classList .
className — получает или задает значение класса.
classList.add() —добавляет значения классов.
classList.toggle() — отобразить/скрыть класс.
classList.contains() — проверяет, существует ли определенное значение.
classList.replace() — заменяет старое значение на новое.
classList.remove() — удаляет значение.
В следующем примере поработаем с каждым из этих методов:
Начальный выводимый результат:
Используем className , чтобы применить значение к классам:
Теперь класс alert , определенный в HTML, назначен первому div :
Это изменит любые существующие классы элемента. Можно добавлять несколько классов, используя className , если разделять имена классов пробелами.
Другой способ изменять классы — использование свойства classList , у которого есть несколько полезных методов:
После запуска всех этих методов, наш HTML отобразится так:
Пометка: classList.add() добавит новый класс к списку существующих (помните, что className изменяет любые существующие классы). Также можно добавлять несколько классов строками, разделенными запятыми.
Изменение стилей
Обычно стили добавляются при помощи отдельных CSS таблиц, однако бывают случаи, когда может понадобиться использовать встроенный стиль. Полезно будет знать, как изменять его непосредственно с помощью JavaScript! Продемонстрируем с помощью следующего HTML:
При работе со свойствами CSS в DOM мы используем camelCase (верблюжий регистр). Таким образом, вместо использования тире, как в CSS, например, border-radius , мы используем camelCase borderRadius , где первое слово начинается со строчной буквы, а второе с заглавной.
Пометка: можно использовать setAttribute() для изменения стилей, например, div.setAttribute('style', 'border-radius: 50%'); , но это удалит все существующие встроенные стили, поэтому лучше использовать непосредственно атрибут style .
Вывод после добавления этих стилей:
Конечно, если нужно применить несколько изменений стиля элемента, лучше применить их к классу в CSS и просто добавить этот новый класс к элементу, используя JavaScript ��.
Заключение
Вот и все!! ������ Мы поработали с деревом DOM и узлами, чтобы изучить все о доступе, прохождении и изменении элементов. Если вы прочитали все части — прекрасно! Теперь вы на пути к улучшению знаний о DOM!