使用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

为您的select标签提供一些id并使用以下代码。 工作Plunker

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