.append()
.append( content [, content ] )
描述：在匹配的元素集合中每个元素的末尾，插入用参数指定的内容。
- content用来插入到匹配的元素集合中每个元素的末尾的DOM元素、元素的数组、HTML字符串，或者jQuery对象
- content用来插入到匹配的元素集合中每个元素末尾的一个或更多的额外的DOM元素、元素的数组、HTML字符串，或者jQuery对象。
该.append()方法插入指定的内容作为jQuery集合中每个元素的最后一个子元素（要想插入为第一个子元素，请使用.prepend()方法）。
.append()方法和.appendTo()方法执行了同样的任务。主要区别是在句法中——具体地说，是内容和目标的位置。利用.append()方法，方法前面的选择器或者表达式是要插入的内容的容器。相较之下，利用.appendTo()方法，方法前面的内容，无论是选择器表达式还是快速创建的元素标签，都会被插入到目标容器中。
设想以下的HTML：
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
你可以创建内容，并把它一次性插入到了若干个元素中：
$( ".inner" ).append( "<p>Test</p>" );
每个<div>元素内部获得了新内容：
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
你还可以选择一个页面上的元素并把它插入到另一个里面：
$( ".container" ).append( $( "h2" ) );
如果以这种方式把一个元素选中并插入到DOM中另一个位置，它会被移到目标位置，而不是被克隆到目标位置。
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> <h2>Greetings</h2> </div>
重要：然而，如果有超过一个目标元素，将创建插入元素的克隆副本，以用于重组个目标，除了最后一个目标。
额外的参数
类似于别的添加内容的方法，比如说.prepend()和.before()，.append()也支持传递多个参数，作为输入。支持的输入包括了DOM元素、jQuery对象、HTML字符串和DOM元素数组。
举个例子，下面的代码将插入两个新的<div>以及一个已有的<div>，作为body的最后三个子节点：
var $newdiv1 = $( "<div id='object1'/>" ), newdiv2 = document.createElement( "div" ), existingdiv1 = document.getElementById( "foo" ); $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
因为.append()可以接受任意数量的额外参数，传入三个<div>作为三个独立的参数，也可以实现同样的结果，像这样：$('body').append( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数量将很大程度上取决于在代码中如何收集元素。
其它说明
- 根据设计意图，任何可以接受一个HTML字符串的jQuery构造器或方法——
jQuery()、.append()、.after()等等——都可以潜在地执行代码。这可能发生注入脚本标签，或者使用HTML元素属性执行代码（例如，<img onload="">）。千万不要用这些方法来插入从不可信任的来源获得的字符串，比如说URL查询参数、cookies，或者表单输入。这样做会导致跨站脚本缺陷（XSS）。在往document添加内容之前要删除或转义一切的用户输入。
示例
向所有的段落文本追加一些HTML。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
</body>
</html>
演示结果
向所有的段落文本追加一个元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).append( document.createTextNode( "Hello" ) );
</script>
</body>
</html>
演示结果
向所有的段落文本追加一个jQuery对象（近似于一个DOM元素的数组）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
<script>
$( "p" ).append( $( "strong" ) );
</script>
</body>
</html>
演示结果