jQuery中append(),prepend()与after(),before()的区别

在jQuery中，添加元素的方法有append(),prepend和 after(),before()两种共四个。但很多人对他们的使用有点混淆，今天就来分析一下。

append()和prepend()的作用

例：JQuery向元素中插入内容

<div id="mochu">
    <li>我是中间</li>
</div>
<script>
    $('#mochu').append('<li>我是尾巴</li>');
    $('#mochu').prepend('<li>我是头部</li>');
</script>

执行结果

<div id="mochu">
    <li>我是头部</li>
    <li>我是中间</li>
    <li>我是尾巴</li>
</div>

分析结果：

append()用于在被选元素的结尾插入元素。

prepend()用于在被选元素的开头插入元素。

after() 和 before() 的作用

例：jquery向指定元素前后插入元素

<p id="mochu">我是中间</p>
<script>
    $('#mochu').before('<p>我是头部</p>');
    $('#mochu').after('<p>我是尾巴</p>');
</script>

运行结果：

<p>我是头部</p>
<p id="mochu">我是中间</p>
<p>我是尾巴</p>

分析结果

after()用于在被选元素之后插入内容。

before()用于在被选元素之前插入内容。

总结：

通过上面的两个小示例，我们可以很清晰的看出append()和prepend()与after()和before()的区别

append()和prepend()：是向指定的元素内部插入元素

after()和before()：是向指定的元素前台插入元素