jQuery - 插入、取代、刪除元素

發表於 2020-10-02 更新於 2021-07-18

插入元素

before()、prepend()、append()、after() 都是用來指定被插入至選擇目標某個位置的文件內容，皆取一個引數，可以是用來指定新內容的「純文字」或「HTML 字串」，也可以是個「jQuery 物件」。
insertBefore()、prependTo()、appendTo()、insertAfter() 則是反過來，指將選擇目標的內容插入至參數表示的哪個位置。

// 以選擇器為主，指定要插入的內容，此方式可以有函式引數
$(selector).append(content)

插入的位置如下：

[before] <p> [prepend] 我是內容 [append] </p> [after]

例子：

$('p').append('<span>P結束標籤前面</span>')
$('p').prepend('<span>p開始標籤後面</span>')
$('p').before('<span>p開始標籤前面</span>')
$('p').after('<span>p開始標籤後面</span>')

這四個更動文件結構的方法也都接受函式，
append()、prepend()，第二個引數是指當下選擇目標的 HTML 字串表示的原內容，
before()、after() 不會有第二引數。

$(selector).append(function(index,currentContent){…})
$(selector).prepend(function(index,currentContent){…})
$(selector).before(function(index){…})
$(selector).after(function(index){…})

replaceWith() 取代元素

replaceWith() 方法用指定的 HTML 內容或元素替換被選元素。
replaceWith()與 replaceAll()作用相同。差異在於語法：內容和選擇器的位置，以及 replaceAll()無法使用函數進行替換。

跟上面四個插入內容一樣可接受函式：

$(selector).replaceWith(function(index,oldContent))

例子：

$('hr').replaceWith('<br>') // 用 <br> 取代 <hr> 元素，hr被取代後不會存在於文件中
$('h2').each(function () {
  // 用 h1 取代 h2，內容不變
  var h2 = $(this)
  h2.replaceWith('<h1>' + h2.html() + '</h1>')
})

// 也可以用 map()，遍歷每一個元素，並在每個 h1 開頭加上章節符號
$('h1')
  .map(function () {
    return this.firstChild //注意使用 this，去抓 JavaScript 的 firstChild
  })
  .before('§')

例子：

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<script>
  // replaceWith()　以選擇器開始，指定要插入的內容
  $('div.second').replaceWith('<h2>New heading</h2>')

  // replaceAll()　反過來以建立內容開始，並插入指定的位置
  $('<h2>New heading</h2>').replaceAll('.inner')
</script>

以上五個方法都是在目標元素上呼叫，並傳入要插入的內容作為引數。
也可以反過來，用內容來呼叫，並傳入目標元素作為引數。
它們是 appendTo()、prependTo()、insertAfter、insertBefore()、replaceAll()，

// 以內容為主，指定要被插入到哪個選擇器，選擇器可以是一個 jQuery 物件、Element、文字節點，這種方式沒有函式引數
$(content).appendTo(selector)

clone() 複製元素

clone() 複製出一份選取集合的副本（包含所有的後代子孫以及文字），
如果想要將文件上的元素複製到新的位置，而非移動它們，必須先用 clone() 方法來複製它們的副本。
clone()會製作並回傳每個所選元素（連同這些元素的所有子元素）的副本。
但是，回傳的 jQuery 物件中的元素尚未成為文件的一部分，要使用上面提到的的方法插入。

<a class="clone" href="http://www.google.com">Google</a>
<p class="box"></p>
<script>
  // 複製 a元素到 p
  let content = $('a.clone').clone()
  $('p.box').append(content)
</script>

刪除元素

empty()

只有清空子元素，移除每個所選元素全部的子元素（包括文字節點），不會更動到所選元素本身。

// .hello 裡面的子元素及內容會被清空
$('.hello').empty()

remove()

連同自己以及子孫元素都一併從 DOM 樹中移除，而且還會移除任何先前已繫結的事件處理器。
remove()通常不帶引數，並會移除 jQuery 物件中所有的元素。不過如果傳入一個引數，那個引數會被視為選擇器，當然，也可以使用 filter 來篩選。

// 可以指定要移除的對象
$('div').remove('.hello')
// 這種做法相當於使用 filter
$('div').filter('.hello').remove()

detach()

detach() 就像 remove()，但不會移除事件處理器與資料。仍會保留所有事件處理器，若只想暫時自文件中移除某些元素，之後還要放回去的話，detach()會比較適合。
會在記憶體中保留一份相同的複製資料。

為元素打包

wrap()、unwrap()、wrapAll()

.wrap() 是包裹的概念，它會將選擇到的元素集合，每一個都加上一個父元素。
.unwrap() 是解包裹的概念，它會將選擇到的元素集合的父元素移除掉。
.wrapAll() 是全包裹的概念，它會將選擇到的元素集合，全部包裹在一個指定的父元素中。

不同於 remove()、detach()，unwrap()並不接受一個額外的選擇器引數。

wrap(html) - 各別包住匹配到的元素

<!-- html -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<!-- jQuery -->
<script>
  $('.inner').wrap('<div class="new"></div>')
</script>

<!-- 結果 -->
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

wrapAll(html) - 一起包住所有匹配到的元素

<!-- 例如 HTML -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<!-- jQuery -->
<script>
  $('.inner').wrapAll('<div class="new" />')
</script>
<!-- 結果 -->
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

wrapInner(html) - 各別包到匹配的元素裡面

<!-- 例如 HTML -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>
  $('.inner').wrapInner('<div class="new"></div>')
</script>

<!-- 得到的結果 -->
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>