jQuery中的append函數用于向指定元素的末尾添加內容。它可以接受任何HTML字符串、DOM元素、DOM元素數組以及其他jQuery對象作為參數。

// 向id為list的ul元素添加一個li元素
$('#list').append('
new item
');
// 向id為list的ul元素添加多個li元素
$('#list').append('
new item 1
new item 2
');
// 向id為list的ul元素添加一個已有的li元素
var $newItem = $('
new item
');
$('#list').append($newItem);
// 向id為list的ul元素添加多個已有的li元素
var $newItems = $('
new item 1
new item 2
');
$('#list').append($newItems);
// 向id為list的ul元素添加一個DOM元素
var newLI = document.createElement('li');
newLI.innerText = 'new item';
$('#list').append(newLI);
// 向id為list的ul元素添加多個DOM元素
var newLI1 = document.createElement('li');
newLI1.innerText = 'new item 1';
var newLI2 = document.createElement('li');
newLI2.innerText = 'new item 2';
$('#list').append(newLI1, newLI2);

注意，如果將一個jQuery對象傳遞給append函數，則該對象中的所有元素都將添加到目標元素的末尾，而不是將整個對象作為一個元素添加。如果想要將整個對象作為一個元素添加，請使用wrap函數。

// 錯誤使用方式
var $newItems = $('
new item 1
new item 2
');
$('#list').append($newItems); // 不會產生想要的效果
// 正確使用方式
var $newItems = $('
new item 1
new item 2
');
$newItems.wrapAll('
'); // 將所有li元素添加到新的ul元素中
$('#list').append($newItems.parent()); // 將新的ul元素添加到目標元素中

使用append函數時，還可以通過回調函數來動態生成要添加的元素。回調函數的參數為當前元素在集合中的索引值。該回調函數應該返回要添加到目標元素的內容。

$('#list').append(function(index) {
return '
new item' + (index + 1) + '
';
});

使用appendTo函數可以實現與append函數相反的效果：將元素添加到目標元素中，而不是將目標元素添加到元素中。它的用法與append函數完全一致，只是調用方式不同。

$('
new item
').appendTo('#list');