jQuery 4種 動態插入元素（before、after、prepend、append）

$('代表插入位置的選擇器').方法名稱('插入元素')
這幾個和這篇 jQuery 動態插入元素 （insertBefore、insertAfter、prependTo、appendTo）類似，差別在於物件與參數之間的關係是顛倒的

這邊就直接上程式碼，不另外多說

$(function() {
  $('#puff').before('<p>蛋糕_N</p>');
  $('#puff').after('<p>布丁_N</p>');
  $('#puff').prepend('<li>餅乾_N</li>');
  $('#puff').append('<li>蘋果派_N</li>');
})

<p>蛋糕_N</p>
<ul id="puff">
  <li>餅乾_N</li>
  <li>泡芙</li>
  <li>蘋果派_N</li>
</ul>
<p>布丁_N</p>

統整

.before()
  #puff
    .prepend()
    li 泡芙
    .append()
.after()