javascript - 为什么将元素追加到末尾

Question

我正在尝试使用 jquery/ajax 制作表单

这是我正在做的事情:

    var form="<form id='frm'>name: <input type='text' id='name' name='name' /> <br />";
    $("#productos").append(form);

    $.get("bb.php").done(function (data){
          $("#frm").append(data); // this return a select
    });

    $("#frm").append("<p id='a1'>aa</p>");
    $("#productos").append("</form>");

我期待着这个:

<form id="frm">
    name: <input id="nombre" type="text" name="name"></input>
    <select> … </select>
    <p id="a1"> … </p>
</form>

但这就是我得到的:

    <form id="frm">
        name: <input id="nombre" type="text" name="name"></input>
        <p id="a1"> … </p>
        <select> … </select>        
    </form>

我知道我可以使用 insertbefore，但我想知道为什么会发生这种情况，以及是否有其他方法可以修复

Answer 1

因为您在此处指定的回调 -

$.get("bb.php").done(function (data){
      $("#frm").append(data); // this return a select
});

在收到服务器响应后执行，而 -

$("#frm").append("<p id='a1'>aa</p>");

此行在您的 ajax 请求触发后、您收到响应之前立即执行。因此，您的段落会出现在您的选择之前。

如果你想维持顺序，那就这样做 -

$.get("bb.php").done(function (data){
    $("#frm").append(data); // this return a select
    $("#frm").append("<p id='a1'>aa</p>"); // now append the paragraph
});

或 -

$.get("bb.php").done(function (data){
    $(data).insertBefore('#a1'); // this return a select
});

$("#frm").append("<p id='a1'>aa</p>");