Создать опцию выбора HTML с использованием свойств или атрибутов

Я хочу программно создать выбранный HTML select option с помощью Javascript (а не jQuery). Каковы достоинства его создания, установив атрибуты следующим образом:

var option = document.createElement('option');
option.setAttribute('text', 'option1');
option.setAttribute('value', 5);
option.setAttribute("selected", true);

в отличие от заданных свойств:

var option = document.createElement('option');
option.text = 'option1';
option.value = 5;
option.selected = true;

Я бы предпочел создать параметры, используя свойства, но просто хочу быть уверенным, что это не вызовет каких-либо проблем, так как многие из примеров, которые я встречал в Интернете, предпочитают использовать прежний подход (т.е. установление атрибутов).

Ответы

Ответ 1

setAttribute следует использовать в элементах DOM, а нижнее - имя атрибута на элементах HTML. Вы не можете использовать точечную нотацию для назначения значений динамическим именам атрибутов.

Использование setAttribute() для изменения определенных атрибутов, особенно значение в XUL, работает непоследовательно, поскольку атрибут указывает значение по умолчанию. Чтобы получить доступ или изменить текущие значения, вы должны использовать свойства. Например, используйте elt.value вместо elt.setAttribute('value', val).

Итак, используйте setAttribute, если у вас есть имена динамических атрибутов. Если у вас есть обычные атрибуты, используйте dot notation.

Ответ 2

setAttribute будет добавлять (создавать) атрибут, если он еще не существует, и установить значение, в то время как короткие руки работают, если атрибут совместим с объектом DOM. Я считаю, что ни один из них не "лучше" использовать, есть только сокращения для использования атрибутов, которые часто используются для удобства.

Я думаю, что он полностью основан на предпочтении пользователя и зависит от того, какие атрибуты вы хотите установить.

Ответ 3

Важно отметить, что при использовании option.setAttribute('text', 'foo'); вместо установки innerHTML вместо этого создается новое свойство с именем text (например, <option text='foo'>).

Функция obj.setAttribute() полезна при настройке недокументированных атрибутов, однако в этом случае было бы лучше использовать option.text = 'foo';