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

after、append、insertAfter都有向选定元素之后插入指定内容的功能，但还是有点不同的。

简单代码：

<div>
   <p>段落1</p>
</div>

  

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

使用after方法向<div>之后插入代码：$("div").after("<p>段落2</p>")。

运行之后的代码结构为：

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

 

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

使用append方法向<div>之后插入代码：$("div").append("<p>段落2</p>")。

运行之后的代码结构为：

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

 

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

HTML标签：

使用insertAfter方法向<div>之后插入代码：$("<p>段落2</p>").insertAfter("div")。

运行之后的结构为：

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

 

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

简答的代码结构：

<div>
   <h1>这是一个标题1</h1>
   <h1>这是一个标题2</h1>
   <h1>这是一个标题3</h1>
</div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

 

使用insertAfter方法向<div>之后插入代码：$("h1").insertAfter("div")。

 

运行之后的代码结构为：

再使用insertAfter方法向<p>之后插入代码：$("h1").insertAfter("p")。

运行之后的代码结构为：
 

由上面的两个例子可以看出：使用insertAfter方法插入已有元素，已有元素会被从当前位置移走，然后被添加到选定的元素之后。有点类似于：先复制一份已有元素，然后在页面上删除已有元素，再在每一个选定元素之后粘贴一份复制的已有元素。

 

5、prepend：在选定元素的开头插入指定内容，该内容可以包含HTML标签。

使用prepend方法向<div>之后插入代码：$("div").prepend("<p>段落2</p>")。

运行之后的代码结构为：

其结构跟append的结构相同，也是直接在选定元素的内部追加，不需要跳出选定元素，不同的是append是在选定元素的尾部追加，prepend是在选定元素的开头追加。