jQuery .before() and .after() method

Question

Add <p>Hey I'm here</p> .before .inner2

<div class="container">
  <h1>Hey</h1>
  <div class="inner1">Hello</div>
  <div class="inner2">Goodbye</div>
</div>

$( ".inner2" ).before( "<p>Hey I'm here</p>" );

//HTML output

<div class="container">
  <h1>Hey</h1>
  <div class="inner1">Hello</div>
  <p>Hey I'm here</p>
  <div class="inner2">Goodbye</div>
</div>

 

Add <p>Hey I'm here</p> .after .inner2

<div class="container">
  <h1>Hey</h1>
  <div class="inner1">Hello</div>
  <div class="inner2">Goodbye</div>
</div>

$( ".inner2" ).after( "<p>Hey I'm here</p>" );

//HTML output

<div class="container">
  <h1>Hey</h1>
  <div class="inner1">Hello</div>
  <div class="inner2">Goodbye</div>
  <p>Hey I'm here</p>
</div>

Answer 1

Add element after element

var preSearchArea = $('.leaderboard.leaderboard-1');
$(preSearchArea).after('yessss');

Answer 2

Add element and move it to before or after element

var preSearchArea = $('.leaderboard.leaderboard-1'),
        searchBox = $('#searchbox-area-outlook');

$(preSearchArea).after('<div id="new-searchbox-area-outlook"></div>');
$('#new-searchbox-area-outlook').html(searchBox);