javascript - 如何在 JavaScript (JQuery) 中构建 "big"div 结构？

Question

我需要制作大的 DIV 结构并将它们 append 到包装器中。但到目前为止，我所看到的总是将一个 DIV 元素 append 到另一个元素中。

有一个空的 DIV 包装器，用于填充“大”DIV 元素

<div class="PostWrapper">
    // Content should be added to here
</div>

我想 append 到 PostWrapper 的 DIV 元素如下所示:

<div class="Post">
    <div class="PostHead">
         <span class="profilePicture">
             <img src="../Profiles/Tom.jpg" />
         </span>
         <span class="userName">Tom</span>
         <span class="postTime">10 minutes ago</span>
    </div>
    <div class="PostBody">
        <p>Hey Tom, great work at the presentation last week. Well done!</p>
    </div>
</div>

所以这是一个 DIV 结构的示例，我想构建它并将其存储在一个 javascript 变量中并 append 到我的包装器中，例如:

var postElement = $("div", {class: "Post"}).append("div", {class: "PostHead"}).append("div", {class: "PostBody"})......

这不会像预期的那样工作。但我想不出一种简单的方法来完成这项工作而无需过于复杂的代码。

这怎么可能？

Answer 1

您只需确保调用 $(...) 就可以做您想做的事。对于您要创建的每个新元素:

var postElement = $("<div>", {class: "Post"}).append(
   $("<div>", {class: "PostHead"}).append( /* head contents */ ),
   $("<div>", {class: "PostBody"}).append( /* body contents */ )
);

$('#PostWrapper').append(postElement);

注意:<div>不是div .前者用于创建元素，后者仅用于选择它们。