insert new DOM between elements

Question

Hi,

I have the following part of DOM:

<div id="content">
  <div id="div-1"></div>
  <!-- here new DOM -->
  <div id="div-2"></div>
</div>

I need to insert new part of DOM between "div-1" and "div-2".

How I can do it with jQuery?

Answer 1

use .after() on div-1

$('#div-1').after('<div id="new">new div</div>');

or use .before() on div-2

$('#div-2').before('<div id="new">new div</div>');

Answer 2

$('#div-1').after('<div>new content</div>')'

or

$('<div>new content</div>').insertAfter($('#div-1'));