jQuery append 方法的返回值是什么？
![pie](mermaid pie "append 方法的返回值" title: 100 append 返回值分布 "DOM 元素": 80 "jQuery 对象": 20 )
引言
在使用 jQuery 进行前端开发时，常常会遇到需要向页面中插入元素的情况。jQuery 提供了 append 方法来实现元素的插入操作。然而，我们可能会对 append 方法的返回值感到困惑，不知道它返回的是什么类型的对象。本文将介绍 append 方法的返回值，并给出相应的代码示例。
什么是 append 方法
在 jQuery 中，append 方法用于向指定的元素内部追加内容。它接受一个参数，用于指定要插入的内容。该参数可以是 HTML 字符串、DOM 元素、或者 jQuery 对象。
append 方法的返回值类型
append 方法的返回值类型取决于传入的参数类型。如果传入的参数是 DOM 元素或者 HTML 字符串，则返回一个包含新插入的元素的 jQuery 对象。而如果传入的参数是一个 jQuery 对象，则返回的仍然是该 jQuery 对象。
下面是一些代码示例来说明这个特性。
代码示例
假设我们有以下的 HTML 结构：
<div id="container">
jQuery append 方法
</div>
示例一：插入 HTML 字符串
我们使用 append 方法插入一个 HTML 字符串：
// 创建一个 div 元素并插入到 #container 中
$('#container').append('<div>New div</div>');
这时，append 方法返回的是一个包含新插入的元素的 jQuery 对象。我们可以继续对该对象进行链式操作：
$('#container div').css('color', 'red');
示例二：插入 DOM 元素
我们使用 append 方法插入一个 DOM 元素：
// 创建一个 p 元素并插入到 #container 中
var p = document.createElement('p');
p.innerText = 'New paragraph';
$('#container').append(p);
同样地，append 方法返回的是一个包含新插入的元素的 jQuery 对象：
$('#container p').css('font-weight', 'bold');
示例三：插入 jQuery 对象
我们使用 append 方法插入一个 jQuery 对象：
// 创建一个 p 元素并包装成 jQuery 对象
var p = $('<p>New paragraph</p>');
$('#container').append(p);
这时，append 方法返回的仍然是该 jQuery 对象，我们可以继续对它进行链式操作：
p.css('text-decoration', 'underline');
总结
通过以上的代码示例，我们可以得出结论：append 方法的返回值类型取决于传入的参数类型。如果传入的参数是 DOM 元素或者 HTML 字符串，则返回一个包含新插入的元素的 jQuery 对象。而如果传入的参数是一个 jQuery 对象，则返回的仍然是该 jQuery 对象。
在实际开发中，我们可以根据 append 方法的返回值类型来决定是否需要对其进行进一步操作。这样能够更灵活地使用 jQuery 插入元素的功能。
希望本文能够对你理解 append 方法的返回值有所帮助，同时也希望你能在实际开发中充分利用 jQuery 提供的强大功能。
