.append()方法:将参数指定的内容插入匹配元素集合中每个元素的末尾
考虑下面代码:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 最常见的一种用法,创建新内容插入
$( ".inner" ).append( "<p>Test</p>" );
- 1
结果每个类属性是inner的div都插入了创建的内容
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 此外,还可以在页面上选择一个元素并将其插入另一个元素
$( ".container" ).append( $( "h2" ) );
- 1
如果以这种方式选择的元素被插入到DOM中的其他单个位置,它将被移动到目标(不被克隆),结果如下:h2标签内容移动到了类名为container的div里面
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>
- 1
- 2
- 3
- 4
- 5
如果有多个目标元素,则将为每个目标创建插入元素的克隆副本(移动并克隆)
$( ".inner" ).append( $( "h2" ) );
- 1
结果:
<div class="container">
<div class="inner">
Hello
<h2>Greetings</h2>
</div>
<div class="inner">
Goodbye
<h2>Greetings</h2>
</div>
</div>