在另一個孩子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()。