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>