jQuery .append() 什么时候像 .insertBefore() 最后 child 与记录的一样？

Question

http://jsfiddle.net/foaje732/2/ HTML 来源：

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

脚本：

$('#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 元素不能包含其他块元素，它只能包含行内元素。因此，您的标记在浏览器中呈现的实际 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>

Answer 2

我们无法在 p 元素中获取任何子元素 <element>，$('#words').children() 将 return 0 以便它 append 您的代码位于p（词后-文本，不是任何元素）。在这种情况下，如果您想修复它，请尝试将 p 更改为 div:

<div id="words">
    <p>Words</p>
    <p>
        <label>Q1
            <input type="text" id="q1" name="myinput" />
        </label>
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).ready(function(){
   $('#words').append($('<p></p>').html("This is clearly in the wrong place."));
})

jQuery .append() 什么时候像 .insertBefore() 最后 child 与记录的一样？

When does jQuery .append() act like .insertBefore() last child vs. as documented?

javascript

jquery

append