JQuery中append()方法的使用

.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>