Jquery中的append()和preappend(),after()和before()的区别

2019独角兽企业重金招聘Python工程师标准>>>

假设
<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>
使用
$('.a').append($('.c'));
则会这样：
<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>
使用
$('.a').prepend($('.c'));
则结果这样：
<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>
after()和before()
同样的上述代码，使用
$('.a').after($('.c'));
结果：
<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
使用
$('.a').before($('.c'));
结果：
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>
由上我们可以得出结论：
append() & prepend()实在元素内插入内容（该内容变成该元素的子元素或节点），
after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。

 

 

转载于:https://my.oschina.net/u/1458120/blog/644878