jQuery .append() 产生乱序的 html 元素。为什么？

Question

我的 html 包含这个

<div id="container"></div>

当我在 javascript 中执行此操作时

$("#container").append( '<div>' );
$("#container").append( '<p>' );
$("#container").append( 'test content' );
$("#container").append( '</p>' );
$("#container").append( '</div>' );

它在浏览器中生成此内容

<div id="container">
    <div></div>
    <p></p>
    "test content"
    <p></p>
</div>

而不是这个

<div id="container">
    <div>
    <p>
    "test content"
    </p>
    </div>
</div>

为什么 div 和 p 元素的顺序严重失调？显然是 append 了额外的 </div>和</p>我的代码未 append 的元素。为什么？

Answer 1

无论是否显式指定结束标记，jQuery 都会创建一个节点，并且 $("#container").append( '<div>' );和$("#container").append( '<p>' );

您需要做的就是 append 到新元素

$("#container").append( '<div>' );
$("#container div").append( '<p>' );
$("#container p").append( 'test content' );

或者将 html append 到一个语句中。

$("#container").append( '<div><p>test content</p></div>' );