jQuery 的 before 是在指定的元素前面插入內容，比如原本的 html 是這樣：

<div class="inner">Hello</div>
<div class="inner">Goodbye</div>

執行 before()

$( ".inner" ).before( "<p>Test</p>" );

就會變成這樣：

  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>

 

after 則是相對的把元素插入到指定的元素後面：

$( ".inner" ).after( "<p>Test</p>" );

結果：

  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>

 

.insertBefore() 則是先寫要插入的內容，後面是目標：

$( "<p>Test</p>" ).insertBefore( ".inner" );

結果如下：

  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>

 

.insertAfter() 則是相對的把內容插入到指定的目標後面：

$( "<p>Test</p>" ).insertAfter( ".inner" );

結果：

  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>