忽略</ .append >标记的.append

Question

我有以下HTML：

<div id='show-label'>
  <select id="comboboxShowLabel">
    <option value="">Hide or show labels?</option>
    <option value="Show Labels">Show Label</option> 
    <option value="Hide Labels">Hide Label</option>
  </select>
</div>

我想在运行时将<select></select>添加到父div，ala：

     <div id='show-label'>
     </div>

    $("#show-label").html("<select id='comboboxShowLabel'>")
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>")
        .append("</select>");       

对于我不知道的响应，结束标记不会被注入到页面中。

我已经尝试过上面的代码，以及类似这样的代码：

.append("<option value='Hide Labels'>Hide Label</option></select>")

是否需要将这些元素“批处理”到单个.append中？我想知道这种方法在加载到DOM时是否看起来不太好，所以被忽略了.

谢谢!

Answer 1

试试这个：

$("#show-label").append(function() {
    return $("<select id='comboboxShowLabel'>")
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>");
});

Answer 2

append()只将一个元素附加到另一个元素。您需要做的是制作一个有效的select标记。然后，您可以将选项附加到该选项中。见文献资料。

$("#show-label").html("<select id='comboboxShowLabel'></select>")
$('#show-label select').append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

Answer 3

取而代之的是这样做：

var $select = $("<select id='comboboxShowLabel'></select>");
$("#show-label").html($select);
$select.append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

如果你以后为了任何原因需要追加。否则，这样做是为了更好的浏览器效率(对实际dom的一个更改而不是多个)：

var $select = $("<select id='comboboxShowLabel'></select>")
    .append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");
$("#show-label").html($select);