Question

这是我的代码

for (i = 0; i < number; i++) {
    var iiDiv = document.createElement('div') $(iiDiv).addClass("form-group") var iLabel = document.createElement('label');
    $(iiDiv).append("<label for=\"timeslot\" class=\"p-label-required\">Time Slot</label>");
    $(iLabel).addClass("input-group p-has-icon p-custom-arrow");
    $(iLabel).append("<select id=\"timeslot\" name=\"timeslot\" required=\"required\" class=\"form-control\" >");
    $(iLabel).append("<option class=\"p-select-default\" value=\"\">Select value</option>");
    $(iLabel).append("<option value=\"1\">1</option>");
    $(iLabel).append("<option value=\"2\">2</option>");
    $(iLabel).append("<option value=\"3\">3</option>");
    $(iLabel).append("<option value=\"4\">4</option>");
    $(iLabel).append("<option value=\"5\">5</option>");
    $(iLabel).append("<option value=\"6\">6</option>");
    $(iLabel).append("<option value=\"7\">7</option>");
    $(iLabel).append("<option value=\"8\">8</option>");
    $(iLabel).append("<option value=\"9\">9</option>");
    $(iLabel).append("<option value=\"10\">10</option>");
    $(iLabel).append("<option value=\"11\">11</option>");
    $(iLabel).append("<option value=\"12\">12</option>");
    $(iLabel).append("</select>");
    $(iLabel).append("<div class=\"p-field-cb\"></div>");
    $(iLabel).append(" <span class=\"p-select-arrow\"><i class=\"fa fa-caret-down\"></i></span>");
    $(iLabel).append("<span class=\"input-group-icon\"><i class=\"fa fa-cutlery\"></i></span>");
    $(iiDiv).append(iLabel) $("#numberOfTableDiv").append(iiDiv);
}

如你所见，我在select内添加了一些选项，但请查看生成的html

<div class="form-group">
    <label for="timeslot" class="p-label-required">Time Slot</label>
    <label class="input-group p-has-icon p-custom-arrow">
        <select id="timeslot" name="timeslot" required="required" class="form-control"></select>
        <option class="p-select-default" value="">Select value</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <div class="p-field-cb"></div> <span class="p-select-arrow"><i class="fa fa-caret-down"></i></span><span class="input-group-icon"><i class="fa fa-cutlery"></i></span></label>
</div>

选项不在选择

中

Answer 1

您可以这样做：

var mySelect = $("<select id=\"timeslot\" name=\"timeslot\" required=\"required\" class=\"form-control\" >");
mySelect.append("<option value=\"1\">1</option>");
//...
$(iLabel).append(mySelect);

问题是jQuery附加了元素，而不是实际的HTML。这可能听起来像相同，但不同之处在于附加的每个元素都附加到DOM 之后附加了任何其他元素。结果是select元素被添加到文档中，然后任何其他元素被添加到iLabel，而不是select，因为没有HTML被解释，只有元素在DOM。

为什么在代码中添加的html与现实中的不一样

1 个答案: