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():是向指定的元素前台插入元素