Почему не добавляется option в select?

Question

[EarthFM]

Не судите строго, это первая программа с помощью паттерна "модуля" и вообще первый раз, когда в js использую ООП.
У меня не получается добавить option в select. В чём может быть проблема?
1. Если использовать innerHTML, то option перезаписывается. Но хоть отображается)
2. С appendChild не получилось.
el.appendChild(list.template(count, text));

Link: Example

Answer 1

[Иван Соломенников]

Предполагается что у вас есть элемент "select"

<select></select>

var select = document.querySelector("form select");

//Старый способ добавления при помощи конструктора Option.
var select = document.querySelector("form select");
var opt = new Option("", "", false, false);
select.appendChild(opt);

//Современный подход
var opt = document.createElement("option");
select.appendChild(opt);

//Ещё такой вариант
var opt = document.createElement("option");
select.add(opt, 0);

Comments

[EarthFM]

А если использовать шаблон var templateHTML = '' + value + ''; а не document.createElement("option");
Как можно тогда добавить? Видел как используют шаблон, например в паттерне MVC, но там они используют фреймворки. А вот как на чистом js не получается(

[Иван Соломенников]

EarthFM: >>>А вот как на чистом js не получается(
Тут пример на нативном js(проверенный), по поводу шаблона я вас не до конца понял.

[EarthFM]

По поводу шаблона: HTML - куски хранятся в js файлах и потом их вытаскивают. Это я увидел, когда используют MVC. не используют document.createElement();

[Stalker_RED]

EarthFM: у вас в примере .innerHTML = новоеЗначение
а нужно innerHTML = староеЗначение + новоеЗначение

[EarthFM]

Stalker_RED: Да, я понял) забыл, что так можно делать) Спасибо, что напомнили

Answer 2

[Stalker_RED]

appendChild принимает в качестве аргумента элемент DOM.
При работе с innerHTML вы полностью переписываете его, а не добавляете в конце.
Вот так всё работает, специально упростил: jsfiddle.net/Stalk/tm61v1et

Comments

[EarthFM]

СпасибО)