chaihongjun.me

JQuery中append()和after()以及prepend()和before()方法的区别

通过字面意思都会知道jquery的方法append()和after()是在操作符之后做添加,prepend()和before()方法是在操作符之前添加。但是他们之间还是有差异的,通过下面的几个例子可以总结。

append方法:

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>


prepend方法:

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").prepend('<span class="s2">s2</span>');
</script>

结果:

<p>
<span class="s2">s2</span>
<span class="s1">s1</span>
</p>


after方法:

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果:

<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>


before方法:

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").before('<span class="s2">s2</span>');
</script>

结果:

<span class="s2">s2</span>
<p>
<span class="s1">s1</span>
</p>


通过上面的结果比对可以发现

  1. append和prepend方法是在元素内嵌入

  2. after和before则是在元素外部嵌入

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»