在另一个子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');

由于#footer总是在那里，因此没有理由附加到#content。

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()。