为什么代码中添加的html与实际情况不同

why the added html in code is not the same as in reality

本文关键字：实际情况 html 代码 添加 为什么      更新时间：2023-09-26

这是我的代码

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>

选项将退出选择

您可以这样做：

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中的元素。

相关文章：