jQuery中append(),prepend()与after(),before()的区别
墨初 前端设计 3093阅读
在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()：是向指定的元素前台插入元素