jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

JQuery中after、append、insertAfter、prepend的简单用法

简单代码：

下面的内容我们一般都是在chrome浏览器中测试这样比较容易看到效果

测试代码

1、after：在选定元素之后插入指定的内容，该内容可以包含HTML标签。

使用after方法向div之后插入代码：

$("div").after("

段落2

");

运行之后的代码结构为：

由此可知：使用after方法追加内容，是在选定的元素外部追加，也就是跳出选定元素在选定元素之后追加。

2、append：在选定元素的结尾插入指定内容，该内容也可以包含HTML标签。

使用append方法向div之后插入代码：

$("div").append("

段落2

");

运行之后的代码结构为：

因此：使用append方法追加内容，是在选定元素的内部追加，没有跳出选定元素，直接在选定元素的尾部追加内容。

3、insertAfter：在被选元素之后插入指定内容或已有元素，该内容可以是HTML标签，也可以是选择器表达式

HTML标签：

使用insertAfter方法向div之后插入代码：

$("

段落2

").insertAfter("div");

运行之后的结构为：

它的结构跟after的结构相同，也是在选定的元素外部追加内容，跳出选定元素之后追加。

4、选择器表达式：这种情况是在页面中存在要插入的元素。

简答的代码结构：

 
这是一个段落。
 
这是另一个段落。

使用insertAfter方法向