jQuery | appendTo() 与示例

概述

appendTo() 方法用于向选择器所匹配的每个元素的内部末尾添加指定的 HTML 内容或元素。

语法：$(html/content/element).appendTo(selector)

其中，参数 html/content/element 代表要追加的 HTML 字符串、DOM 元素、jQuery 对象，而 selector 则是一个可选的字符串，用于指定要将内容追加到哪个元素内部。

示例

以下是 appendTo() 方法的几个示例：

示例 1

// 在 #container 元素内部的末尾添加一个段落元素
$("<p>This is a new paragraph!</p>").appendTo("#container");

以上代码会将一个新的段落元素追加到 id 为 #container 的元素的内部末尾。

示例 2

// 在每个 <li> 元素内部的末尾添加一个删除按钮
$("<button>Delete</button>").appendTo("li");

以上代码会在页面上所有的 <li> 元素内部末尾添加一个删除按钮。

示例 3

// 在每个 <li> 元素内部的末尾添加新的 <span> 元素
$("<span> (Click me to edit)</span>").appendTo("li");

以上代码会在页面上所有的 <li> 元素内部末尾添加一个新的 <span> 元素。

示例 4

// 将文本输入框添加到表单的末尾
$("<input type='text' name='username'>").appendTo("form");

以上代码会在表单的末尾添加一个文本输入框。

总结

appendTo() 方法可以在指定元素内部末尾添加任何 HTML 内容或元素，这使得页面的构建变得更加灵活和便捷。如果您需要将内容添加到指定元素内部开头，可以使用 prependTo() 方法。