在另一个孩子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的将永远存在。

Answer 1

可能，我建议：

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

JS Fiddle demo。虽然这可能是为了简洁（而且说实话，我觉得它很容易阅读和理解），但我不确定它比你自己的第一次尝试简单得多。

在上面的代码中，我假设#foodiv在页面上不存在。如果确实已经存在，则改用：

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

JS Fiddle demo。

参考文献：

• append()。
• insertBefore()。