jquery 追加元素append、prepend、before、after用法与区别分析

当我们使用jQuery来操作DOM元素的时候，有时候需要在已有的HTML元素中动态添加新的元素。这时候就需要用到四个方法：append、prepend、before和after。

一、append

append()函数可以将其它HTML元素添加到指定元素的内部子元素的末尾处。如下面的例子，在<div id="content">中插入了一个p标签和一个button标签：

<div id="content">
  <p>This is a paragraph.</p>
</div>

<script>
  // 在 div 中追加新的元素
  $('#content').append('<p>This is another paragraph.</p><button>Click me!</button>');
</script>

添加后的内容：

<div id="content">
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <button>Click me!</button>
</div>

二、prepend

prepend()函数可以将其它HTML元素添加到指定元素的内部子元素的开始处。如下面的例子，在<div id="content">中插入了一个p标签和一个button标签：

<div id="content">
  <p>This is a paragraph.</p>
</div>

<script>
  // 在 div 中前置新的元素
  $('#content').prepend('<button>Click me!</button><p>This is another paragraph.</p>');
</script>

添加后的内容：

<div id="content">
  <button>Click me!</button>
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
</div>

三、before

before()函数可以在指定元素的前面添加一个HTML元素。如下面的例子，在<div id="content">的前面插入了一个p标签和一个button标签：

<div>
  <!-- 在 div 中追加新的元素 -->
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
</div>

<script>
  // 在 div 的前面添加一个新的元素
  $('#content').before('<button>Click me!</button><p>This is another paragraph.</p>');
</script>

添加后的内容：

<div>
  <button>Click me!</button>
  <p>This is another paragraph.</p>
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
</div>

四、after

after()函数可以在指定元素的后面添加一个HTML元素。如下面的例子，在<div id="content">的后面插入了一个p标签和一个button标签：

<div>
  <!-- 在 div 中追加新的元素 -->
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
</div>

<script>
  // 在 div 的后面添加一个新的元素
  $('#content').after('<p>This is another paragraph.</p><button>Click me!</button>');
</script>

添加后的内容：

<div>
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
  <p>This is another paragraph.</p>
  <button>Click me!</button>
</div>

五、四种方法的异同

四个方法的使用都较为简单，唯一的区别是新元素被添加的位置不同，如下表格所示：

方法	位置	备注
append()	末尾	添加到指定元素的子元素末尾处
prepend()	开始	添加到指定元素的子元素开头处
before()	前面	添加到指定元素的前面
after()	后面	添加到指定元素的后面

需要注意的是，这四个方法返回的都是原始jQuery对象，因此可以进行链式操作。例如：

$('#content')
  .append('<p>This is another paragraph.</p>')
  .append('<button>Click me!</button>');

以上代码实现了先追加一个p标签，然后再追加一个button标签。

总结一下，四个方法都是用来实现动态添加HTML元素的，但是添加元素的位置不同。在实际使用中，需要根据不同的需求选择不同的方法。