jQuery | appendTo() 与示例

简介

appendTo() 方法将选定元素插入到指定元素的最后面（末尾）。这个方法是被插入元素的jQuery对象调用的。

$(content).appendTo(selector)

其中，content 是要插入的内容，可以是纯文本、HTML字符串或DOM元素；selector 是要插入到的DOM元素或选择器。

示例

插入文本

$('<p>hello world</p>').appendTo('.container');

这个例子中，将一个 <p>hello world</p> 的标签插入到类名为 container 的元素最后一个子元素的末尾。

插入HTML字符串

$('<div><h2>Title</h2><p>Content</p></div>').appendTo('#main');

这个例子中，将一个包含 h2 和 p 标签的 <div> 元素插入到 id 为 main 的元素最后一个子元素的末尾。

插入DOM元素

var newElement = document.createElement('span');
newElement.textContent = 'new span element';
$(newElement).appendTo('.container');

这个例子中，创建一个 span 元素并设置其文本为 new span element，然后将它插入到类名为 container 的元素最后一个子元素的末尾。

插入jQuery对象

var $newElement = $('<li>new list item</li>');
$newElement.appendTo('.list');

这个例子中，将一个 jQuery 对象 $newElement 插入到类名为 list 的元素最后一个子元素的末尾。这个 jQuery 对象可以通过任何 jQuery DOM 操作方法创建。

总结

appendTo() 方法用于将指定内容插入到指定DOM元素的最后一个子元素末尾。它可以插入纯文本、HTML字符串、DOM元素或jQuery对象。