Question

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

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

的Jscript：

$('#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

我们无法在<element>元素中找到任何子p，$('#words').children()将返回0，以便append代码位于p的顶部（在单词-text之后，不是任何元素）。在这种情况下，如果您想要解决此问题，请尝试将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（）最后一个孩子？

2 个答案: