javascript - jQuery .append() 何时像 .insertBefore() 最后一个子项一样工作？

Question

http://jsfiddle.net/foaje732/2/HTML 源代码:

<p id="words">Words
    <p>
        <label>Q1
            <input type="text" id="q1" name="myinput" />
        </label>
    </p>
</p>

J脚本:

$('#words').append($('<p></p>').html("This is clearly in the wrong place."));

您实际得到的:

Words.This is clearly in the wrong place.Q1 [input field] 

Answer 1

这是因为你的标记错误，p元素不能包含其他 block 元素，它只能包含内联元素。因此，您的标记在浏览器中呈现的实际 html 将如下所示，这使得您的输出正确。

<p id="words">Words</p>
<p>
    <label>Q1
        <input type="text" id="q1" name="myinput">
    </label>
</p>
<p></p>

因此，您可以寻找的一种可能的解决方案是使用 div 作为外部容器，例如

$('#words').append($('<p></p>').html("This is clearly in the wrong place."));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="words">Words
  <div>
    <label>Q1
      <input type="text" id="q1" name="myinput" />
    </label>
  </div>
</div>