Добавить элемент динамически с помощью javascript

Question

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

<div id="leaguesList"> 
    <select> 
    <option>NBA</option> 
    <option>MLB</option> 
    <option>NFL</option> 
    <option>NCAAF</option> 
    <option>NHL</option> 
    <option>Soccer</option> 
    </select> 
</div> 

<button type="button" class="btn btn-default" onclick="addLeagueSelect()">Add</button> 
. 
. 
. 
<script> 
    function addLeagueSelect() { 
    var list = document.getElementById("leaguesList"); 
    list.appendChild(list.firstChild.cloneNode(true)); 
    } 
</script> 

Что случилось с этим кодом? Скрипт работает без исключений, но новый объект выбора не появляется. Спасибо.

Answer 1

list.firstChild не то, что вы думаете.

Это на самом деле текстовый узел созданного белым пространство между открытием ваших div Заключительным > и select «ы <. Это - это то, что вы клонируете и добавляете сюда, и именно поэтому вы ничего не видите в результате этого кода.

Используйте какой-нибудь другой, более надежный способ на самом деле получить ссылку на select элемент, а затем клонировать его, например

list.getElementsByTagName("select")[0].cloneNode(true) 

http://jsfiddle.net/hhsvr9sy/

Answer 2

Дайте id вашей метке select и используйте код ниже. Working Plunker

var select = document.getElementById('selectElementId'); 
var opt = document.createElement('option'); 
opt.value = ""; //some value 
opt.innerHTML = ""; // innerHTML 
select.appendChild(opt);