Edit in JSFiddle

$(document).ready(function() {
    $('#one').before('<p>This is before()</p>');
    $('#two').after('<p>This is after()</p>');
    $( "<p>this is insertBefore()</p>" ).insertBefore( "#three" );
    $( "<p>this is insertAfter()</p>" ).insertAfter( "#four" );
<!-- We can specify where in the DOM we insert an element with the .before() and .after() functions. The syntax looks like this:

$('target').after('<tag>To add</tag>');
Where 'target' is the element after which you want to add something and the bit between <tag>s is the HTML element you want to add. You can add <h1>s, <div>s, or any other valid HTML you like. -->

<!DOCTYPE html>
        <script type='text/javascript' src='script.js'></script>
        <div class="container">
            <div id="one">Div #1</div>
            <div id="two">Div #2</div>
            <div id="three">Div #3</div>
            <div id="four">Div #4</div>