Являются ли add () и appendChild () одинаковыми для выбранных объектов DOM?

Question

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

Мне было интересно, если 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);

Answer 1

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

var options = select.options;
options[options.length] = new Option("Option text", "option_value");

Answer 2

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

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

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

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

Answer 3

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

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

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