Я работаю над небольшим веб-приложением, которое изменяет содержимое выпадающего списка.

Мне было интересно, если appendChild () и add () выполняют одну и ту же задачу для выбранного объекта DOM в JavaScript?


var someSelect = document.getElementById('select-list');
var newOption = document.createElement('option');
someSelect.appendChild(newOption);
// The above is the same as the following?
someSelect.add(newOption);
4
kevin628 31 Авг 2010 в 21:34

3 ответа

Лучший ответ

Я полагаю, что в этом случае они выполнят ту же задачу.

add( ) предоставляется специально через HTMLSelectElement интерфейс специально для добавления опций к элементу select и имеет несколько дополнительных опций (таких как необязательный индекс для добавления нового option и т. д.).

appendChild( ) даст вам прямое добавление дочернего узла.

Следите за различными реализациями обоих методов кросс-браузер: я думаю, это будет вашей самой большой проблемой. IIRC, IE будут вызывать проблемы при добавлении дочерних элементов к select, поэтому вы можете захотеть add, если этот метод существует и использовать appendChild.

3
ajm 31 Авг 2010 в 17:44

Я думаю, что это должно быть эквивалентно, но здесь вы можете найти вопрос, который отмечает различные реализации, когда вы пытаетесь работать с группами опций:

Поле SELECT: в IE элемент добавляется в OptGroup вместо root. FF хорошо

IE не может добавить новую опцию «в корне», когда внутри элемента select уже есть группа.

1
Community 23 Май 2017 в 12:01

Если вы хотите быть уверены в совместимости между браузерами при работе с параметрами внутри <select>, самый верный способ - использовать его свойство options и заполнить его Option объектами. Следующий проверенный временем метод работает во всех скриптовых браузерах с конца 1990-х годов:

var options = select.options;
options[options.length] = new Option("Option text", "option_value");
5
Tim Down 31 Авг 2010 в 23:23