jQuery .before() and .after() method

0 votes
284 views
added Apr 13, 2018 in jQuery by LC Marshal Captain (25,790 points)
edited Apr 13, 2018 by LC Marshal

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>

2 Responses

0 votes
responded May 22, 2018 by LC Marshal Captain (25,790 points)

Add element after element

var preSearchArea = $('.leaderboard.leaderboard-1');
$(preSearchArea).after('yessss');
0 votes
responded May 22, 2018 by LC Marshal Captain (25,790 points)

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);
lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...