1、append(content|fn)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $('li').append('<p name="p2">p2</p>')
</script>
</html>

结果是这个样子的
这里写图片描述

2、appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $('<p>哈哈</p>').appendTo('li')
</script>
</html>

结果是这个样子的
这里写图片描述

append与appendTo的区别:

①append()前面是要选择的对象,后面是要在对象内插入的元素内容 即(A).append(B)BAappendTo()(A).appendTo(B),把A追加到B中


本文转载:CSDN博客