Question

Is there a way to make to make this simpler?

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

This is what the final product looks like, but I am assuming there is cleaner way to do so.

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

…well, I got it down to two lines.

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

There really wasn’t a reason to append to the #content since the #footer will always be there.

Answer 1

May I suggest:

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

JS Fiddle demo.

While this wins, perhaps, for brevity (and, to be honest, I find it fairly simple to read and understand), I’m not sure it’s significantly more-simple than your own first attempt.

I am, in the above code, assuming that the #foo div doesn’t already-exist on the page. If it does exist already, then instead use:

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

JS Fiddle demo.

References:

• append().
• insertBefore().