F2E

jQuery 4種 動態插入元素（insertBefore、insertAfter、prependTo、appendTo）

$('插入元素').方法名稱('代表插入位置的選擇器')

.insertBefore() 在元素之前插入元素

1
2
3
$(function() {
  $('<p>蛋糕_N</p>').insertBefore('#puff');
})
1
2
3
4
5
6
7
8
9
10
<!-- 執行前 -->
<ul id="puff">
  <li>泡芙</li>
</ul>

<!-- 執行後，<p>元素 插在 #puff 之前-->
<p>蛋糕_N</p>         
<ul id="puff">
  <li>泡芙</li>
</ul>

.insertAfter() 在元素之後插入元素

1
2
3
$(function() {
  $('<p>蛋糕_N</p>').insertAfter('#puff');
})
1
2
3
4
5
6
7
8
9
10
<!-- 執行前 -->
<ul id="puff">
  <li>泡芙</li>
</ul>

<!-- 執行後，<p>元素 插在 #puff 之後 -->
<ul id="puff">
  <li>泡芙</li>
</ul>
<p>蛋糕_N</p>

.prependTo() 在所有元素的開頭插入元素

1
2
3
$(function() {
  $('<li>蛋糕_N</li>').prependTo('#puff');
})
1
2
3
4
5
6
7
8
9
10
<!-- 執行前 -->
<ul id="puff">
  <li>泡芙</li>
</ul>

<!-- 執行後，在#puff元素的子元素開頭插入 -->
<ul id="puff">
  <li>蛋糕_N</li>
  <li>泡芙</li>
</ul>

.appendTo() 在所有元素的最後插入元素

1
2
3
$(function() {
  $('<li>布丁_N</li>').appendTo('#puff');
})
1
2
3
4
5
6
7
8
9
10
<!-- 執行前 -->
<ul id="puff">
  <li>泡芙</li>
</ul>

<!-- 執行後，在#puff元素的子元素結尾插入 -->
<ul id="puff">
  <li>泡芙</li>
  <li>布丁_N</li>
</ul>

統整

1
2
3
4
5
6
.insertBefore()
  #puff
    .prependTo()
    li 泡芙
    .appendTo()
.insertAfter()