jquery - 在父 DIV 中先于另一个子 DIV 创建 DIV

Question

有没有办法让这件事变得更简单？

$('#content').append('<div id="bar"></div>');
$('#bar').insertBefore('#footer');
$('#foo').appendTo('#bar');

这就是最终产品的样子，但我假设有更干净的方法来做到这一点。

<div id="content">
   <div id="bar">
     <div id="foo"></div>
   </div>
   <div id="footer"></div>
</div>

...好吧，我把它减少到两行。

$('<div id="bar"></div>').insertBefore('#footer');
$('#foo').appendTo('#bar');

确实没有理由附加到#content，因为#footer 总是在那里。

Answer 1

我可以建议:

$('<div id="bar" />').insertBefore($('#footer')).append('<div id="foo" />');

JS Fiddle demo .

虽然这也许是为了简洁(而且，说实话，我发现它相当容易阅读和理解)，但我不确定它是否比您自己的第一次尝试简单得多。

在上面的代码中，我假设页面上尚不存在 #foo div 。如果它确实已经存在，则使用:

$('<div id="bar" />').insertBefore($('#footer')).append($('#foo'));​

JS Fiddle demo .

引用文献:

• append() .
• insertBefore() .