jquery append appendTo before after insertAfter insertBefore prepend prependTo用法区别

after()

在匹配的元素之后插入内容。

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

结果：

This is a paragraph.

Hello world!

before()

在每个匹配的元素之前插入内容。

$("button").click(function(){
  $("p").before("<p>Hello world!</p>");
});

结果：

Hello world!

This is a paragraph.

append()

向匹配元素集合中的每个元素结尾插入由参数指定的内容

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

结果：

This is a paragraph. Hello world!

This is another paragraph. Hello world!

appendTo()

向目标结尾插入匹配元素集合中的每个元素。

$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
});

结果：

This is a paragraph. Hello World!

This is another paragraph. Hello World!

insertAfter()

把匹配的元素插入到另一个指定的元素集合的后面。

$("button").click(function(){
  $("<span>Hello world!</span>").insertAfter("p");
});

结果：

这是一个段落。

你好！

这是另一个段落。

你好

insertBefore()

把匹配的元素插入到另一个指定的元素集合的前面。

$("button").click(function(){
  $("<span>Hello world!</span>").insertBefore("p");
});

结果：

你好！

这是一个段落。

你好！

这是另一个段落。

prepend()

向匹配元素集合中的每个元素开头插入由参数指定的内容。

$(".btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});

结果：

Hello world! This is a paragraph.

Hello world! This is another paragraph.

prependTo()

向目标开头插入匹配元素集合中的每个元素。

$(".btn1").click(function(){
  $("<b>Hello World!</b>").prependTo("p");
});

结果：

Hello World!This is a paragraph.

Hello World!This is another paragraph.