別の子供の前に親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> 

...よく、私は2行にしました。

$('<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。

簡潔にするためにこれが勝っていますが（正に、読んで理解するのがかなり簡単だと思いますが）、自分の最初の試みよりもはるかに単純だとは思いません。

私は上記のコードで、#foodivがページに存在していないと仮定しています。それはがすでに存在する場合、代わりに使用します。

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

JS Fiddle demo。

参考文献：

• append()。
• insertBefore()。