jQuery DOM 操作

jQuery 提供強大的 DOM 操作功能，讓你能夠輕鬆地取得、設定、新增、刪除和修改 HTML 元素與內容。

取得與設定內容

html() - HTML 內容

html() 方法用於取得或設定元素的 HTML 內容（包含 HTML 標籤）：

// 取得 HTML 內容
var content = $('#box').html();

// 設定 HTML 內容
$('#box').html('<strong>新內容</strong>');

// 使用函式設定（可取得舊值和索引）
$('.item').html(function (index, oldHtml) {
  return '<span>項目 ' + (index + 1) + '</span>';
});

text() - 純文字內容

text() 方法用於取得或設定元素的純文字內容（會自動跳脫 HTML 標籤）：

// 取得純文字內容
var text = $('#box').text();

// 設定純文字內容（HTML 標籤會被跳脫）
$('#box').text('<strong>這會顯示為純文字</strong>');

// 使用函式設定
$('.item').text(function (index, oldText) {
  return '項目 ' + (index + 1);
});

val() - 表單值

val() 方法用於取得或設定表單元素的值：

// 取得 input 值
var username = $('#username').val();

// 設定 input 值
$('#username').val('John');

// 取得 select 的選取值
var selected = $('#country').val();

// 設定 select 的選取值
$('#country').val('tw');

// 取得多選 select 的所有選取值（返回陣列）
var selections = $('#multi-select').val();

// 設定多選 select 的選取值
$('#multi-select').val(['option1', 'option2']);

// 取得已勾選的 radio 值
var gender = $('input[name="gender"]:checked').val();

插入內容

內部插入

在元素內部新增內容：

// append() - 在元素內部的最後面加入
$('#list').append('<li>新項目</li>');

// prepend() - 在元素內部的最前面加入
$('#list').prepend('<li>第一個項目</li>');

// appendTo() - 將內容加到目標元素內部的最後面
$('<li>新項目</li>').appendTo('#list');

// prependTo() - 將內容加到目標元素內部的最前面
$('<li>第一個項目</li>').prependTo('#list');

append() / prepend() vs appendTo() / prependTo() 的差異在於呼叫方向：

// 這兩行效果相同
$('#list').append('<li>項目</li>');
$('<li>項目</li>').appendTo('#list');

外部插入

在元素外部（兄弟位置）新增內容：

// after() - 在元素後面加入
$('#item').after('<div>後面的元素</div>');

// before() - 在元素前面加入
$('#item').before('<div>前面的元素</div>');

// insertAfter() - 將內容插入到目標元素後面
$('<div>後面的元素</div>').insertAfter('#item');

// insertBefore() - 將內容插入到目標元素前面
$('<div>前面的元素</div>').insertBefore('#item');

插入內容的各種形式

這些方法可以接受多種形式的內容：

// HTML 字串
$('#box').append('<p>段落</p>');

// DOM 元素
var p = document.createElement('p');
$('#box').append(p);

// jQuery 物件
$('#box').append($('.template').clone());

// 函式（返回內容）
$('#box').append(function (index, html) {
  return '<p>動態內容 ' + index + '</p>';
});

包裹元素

wrap() - 外層包裹

在每個匹配元素的外層加上包裹元素：

// 將每個 p 元素用 div 包起來
$('p').wrap('<div class="wrapper"></div>');

// 結果：
// <div class="wrapper"><p>段落1</p></div>
// <div class="wrapper"><p>段落2</p></div>

wrapAll() - 整體包裹

將所有匹配元素一起用一個元素包起來：

// 將所有 p 元素一起用一個 div 包起來
$('p').wrapAll('<div class="all-wrapper"></div>');

// 結果：
// <div class="all-wrapper">
//   <p>段落1</p>
//   <p>段落2</p>
// </div>

wrapInner() - 內層包裹

在每個匹配元素的內容外層加上包裹元素：

// 將每個 p 元素的內容用 span 包起來
$('p').wrapInner('<span class="inner"></span>');

// 原本：<p>段落</p>
// 結果：<p><span class="inner">段落</span></p>

unwrap() - 移除包裹

移除匹配元素的父元素：

// 移除 p 元素的父層 div
$('p').unwrap();

// 可以指定條件，只移除符合條件的父元素
$('p').unwrap('.wrapper');

移除元素

remove() - 完全移除

移除匹配的元素（包含元素上綁定的事件和資料）：

// 移除所有 .error 元素
$('.error').remove();

// 可以加上選擇器過濾
$('p').remove('.warning'); // 只移除有 .warning class 的 p

detach() - 暫時移除

移除元素但保留元素上綁定的事件和資料，方便之後重新插入：

// 暫時移除元素
var $item = $('#item').detach();

// ... 做一些事情 ...

// 重新插入（事件和資料都還在）
$('#container').append($item);

empty() - 清空內容

清空元素內的所有內容，但保留元素本身：

// 清空 #box 內的所有內容
$('#box').empty();

remove() vs detach() vs empty() 比較

複製元素

clone() - 複製

複製匹配的元素：

// 複製元素
var $copy = $('#item').clone();

// 將複製的元素插入到某處
$copy.appendTo('#container');

// 鏈式寫法
$('#item').clone().appendTo('#container');

預設情況下，clone() 不會複製元素上的事件和資料。若要一併複製：

// 複製元素，包含事件和資料
var $copy = $('#item').clone(true);

// 第二個參數可以指定是否深層複製子元素的事件和資料
var $copy = $('#item').clone(true, true);

替換元素

replaceWith() - 替換元素

用新內容替換匹配的元素：

// 將 .old 元素替換為新內容
$('.old').replaceWith('<div class="new">新內容</div>');

// 使用函式
$('.item').replaceWith(function (index) {
  return '<div>新項目 ' + index + '</div>';
});

replaceAll() - 替換所有

功能同 replaceWith()，但呼叫方向相反：

// 用新內容替換所有 .old 元素
$('<div class="new">新內容</div>').replaceAll('.old');

建立新元素

使用 $() 可以建立新的 HTML 元素：

// 建立新元素
var $newDiv = $('<div>');
var $newP = $('<p>這是新段落</p>');

// 建立帶屬性的元素
var $newLink = $('<a>', {
  href: 'https://example.com',
  text: '點擊這裡',
  class: 'external-link',
  target: '_blank',
});

// 建立複雜結構
var $card = $('<div>', { class: 'card' })
  .append($('<h3>', { text: '標題' }))
  .append($('<p>', { text: '內容' }));

// 插入到頁面
$card.appendTo('#container');

實用範例

動態建立列表

var items = ['蘋果', '香蕉', '橘子'];
var $ul = $('<ul>');

$.each(items, function (index, item) {
  $('<li>').text(item).appendTo($ul);
});

$ul.appendTo('#container');

移動元素

// 將 #item 移動到 #newContainer 內
$('#item').appendTo('#newContainer');

// 注意：如果元素已存在於 DOM 中，append 會移動而非複製
// 若要保留原元素，需要使用 clone()
$('#item').clone().appendTo('#newContainer');

批量處理

// 為所有段落加上序號
$('p').each(function (index) {
  $(this).prepend('<span class="number">' + (index + 1) + '. </span>');
});

// 使用 html() 的函式參數
$('p').html(function (index, oldHtml) {
  return '<span class="number">' + (index + 1) + '.</span> ' + oldHtml;
});