我需要制作大的 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"})......
这不会像预期的那样工作。但我想不出一种简单的方法来完成这项工作而无需过于复杂的代码。
这怎么可能?
最佳答案
您只需确保调用 $(...)
就可以做您想做的事。对于您要创建的每个新元素:
var postElement = $("<div>", {class: "Post"}).append(
$("<div>", {class: "PostHead"}).append( /* head contents */ ),
$("<div>", {class: "PostBody"}).append( /* body contents */ )
);
$('#PostWrapper').append(postElement);
注意:<div>
不是div
.前者用于创建元素,后者仅用于选择它们。
关于javascript - 如何在 JavaScript (JQuery) 中构建 "big"div 结构?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25852361/