Ad

Why The Added Html In Code Is Not The Same As In Reality

- 1 answer

This is my code

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);
}

as you see, i'm adding some options inside the select, but look at the generated 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>

the options are going out of the select

Ad

Answer

You can do something like this:

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

The issue was that jQuery appends elements, not actual HTML. This might sound like the same, but the difference is that each element appended is attached to the DOM before any other element is appended. The result is that the select element is added to the document, and then any other element is added to iLabel, rather than the select, because there is no HTML being interpreted, just elements in the DOM.

Ad
source: stackoverflow.com
Ad