首页 > 程序开发 > web前端 > JavaScript >

jquery中append、prepend,before和after方法的区别

2017-01-25

jquery中append、prepend,before和after方法的区别。append() & prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。

1. append()和prepend()

假设

<div class=&#39;a&#39;> //<---you want div c to append in this
  <div class=&#39;b&#39;>b</div>
</div>

使用

$(&#39;.a&#39;).append($(&#39;.c&#39;));

效果如下:

<div class=&#39;a&#39;> //<---you want div c to append in this
  <div class=&#39;b&#39;>b</div>
  <div class=&#39;c&#39;>c</div>
</div>

同样使用

$(&#39;.a&#39;).prepend($(&#39;.c&#39;));

效果如下:

<div class=&#39;a&#39;> //<---you want div c to append in this
  <div class=&#39;c&#39;>c</div>
  <div class=&#39;b&#39;>b</div>
</div>

2. 使用after()和before()

同样使用假设代码:

$(&#39;.a&#39;).after($(&#39;.c&#39;));

效果如下:

<div class=&#39;a&#39;>
  <div class=&#39;b&#39;>b</div>
</div>
<div class=&#39;c&#39;>c</div>

同样使用before()

$(&#39;.a&#39;).before($(&#39;.c&#39;));

效果如下:

<div class=&#39;c&#39;>c</div>
<div class=&#39;a&#39;>
  <div class=&#39;b&#39;>b</div>
</div>

总结:

append() & prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。

相关文章
最新文章
热点推荐