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

【问题标题】：jQuery .append() produced out of order html elements. Why?jQuery .append() 产生乱序的 html 元素。为什么？
【发布时间】：2017-05-14 06:04:32
【问题描述】：

我的 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 元素非常乱？它显然附加了我的代码未附加的额外 </div> 和 </p> 元素。为什么？

【问题讨论】：

实际上您的代码确实附加了这些元素，因为这正是浏览器应该对该代码序列执行的操作。
因为它不像构建一个字符串......
@epascarello 完全正确 - 它正在构建一棵 DOM 元素树，一次一个

标签： jquery append

【解决方案1】：

.append 方法只能插入完整 HTML 元素，不能插入不完整的 HTML 片段。

对于不是自闭合的元素，这意味着.append('<div>') 将有效地附加<div></div>。事实上，在这种情况下，.append 方法根本不会真正附加 HTML，它只会调用 document.createElement('div')，然后将新创建的节点附加到指定的父节点。

生成所需内容的另一种方法是：

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

【讨论】：

【解决方案2】：

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

您需要做的是追加到新元素

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

或将 html 附加到一个语句中。

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

【讨论】：

上面的 cmets 很有帮助。感谢您抽出宝贵时间回复！
说 jQuery 添加了结束标签是不正确的。在后台代码将执行document.createElement('div') 并且新创建的元素已经“关闭”。如果您随后将注释添加到 that 节点，则在 HTML 中它们将出现在两个标记之间。当您将 DOM 视为 DOM 元素的树而不是 HTML 时，它应该会变得更加清晰。
很好的洞察力@Alnitak。我不熟悉 jQuery 如何完成构建 DOM。谢谢你的澄清。