当前位置:Gxlcms > JavaScript > jquery中append、prepend,before和after方法的区别

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

时间:2021-07-01 10:21:17 帮助过:19人阅读


1. append()和prepend()

假设

<p class='a'> //<---you want p c to append in this
  <p class='b'>b</p>
</p>

使用

$('.a').append($('.c'));

效果如下:

<p class='a'> //<---you want p c to append in this
  <p class='b'>b</p>
  <p class='c'>c</p>
</p>

同样使用

$('.a').prepend($('.c'));

效果如下:

<p class='a'> //<---you want p c to append in this
  <p class='c'>c</p>
  <p class='b'>b</p>

</p>

2. 使用after()和Before.html" target="_blank">before()

同样使用假设代码:

$('.a').after($('.c'));

效果如下:

<p class='a'>
  <p class='b'>b</p></p><p class='c'>c</p>

同样使用before()

$('.a').before($('.c'));

效果如下:

<p class='c'>c</p><p class='a'>
  <p class='b'>b</p></p>

总结:

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

1. append()和prepend()

假设

<p class='a'> //<---you want p c to append in this
  <p class='b'>b</p>
</p>

使用

$('.a').append($('.c'));

效果如下:

<p class='a'> //<---you want p c to append in this
  <p class='b'>b</p>
  <p class='c'>c</p>
</p>

同样使用

$('.a').prepend($('.c'));

效果如下:

<p class='a'> //<---you want p c to append in this
  <p class='c'>c</p>
  <p class='b'>b</p>

</p>

2. 使用after()和before()

同样使用假设代码:

$('.a').after($('.c'));

效果如下:

<p class='a'>
  <p class='b'>b</p></p><p class='c'>c</p>

同样使用before()

$('.a').before($('.c'));

效果如下:

<p class='c'>c</p><p class='a'>
  <p class='b'>b</p></p>

总结:

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

以上就是jquery中append、prepend, before和after方法的区别的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行