jQuery 追加元素的方法如append、prepend、before
更新时间：2014年01月16日 17:16:52 投稿：whsnow
jQuery - 追加元素的方法有很多如append、prepend、before等等，下面为大家详细介绍下
1.jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");
2.jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");
3、after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");
$("img").before("Some text before");
下面脚本之家小编给补充一下
append() 方法在被选元素的结尾插入内容。
prepend() 方法在被选元素的开头插入内容。
after() 方法在被选元素之后插入内容。
before() 方法在被选元素之前插入内容。
演示代码：
<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
<ul>
<li>第一个li标签</li>
</ul>
</div>
<script>
//append
$('.testdiv ul').append('<li>append 插入的li</li>');
//prepend
$('.testdiv ul').prepend('<li>prepend 插入的li</li>');
//after
$('.testdiv ul').after('<li>after 插入的li</li>');
//before
$('.testdiv ul').before('<li>before 插入的li</li>');
</script>
运行后效果图：
html结构图
相关文章
这篇文章主要介绍了jQuery实现类似淘宝网图片放大效果的方法,实例分析了jquery实现图片放大效果的方法,涉及jquery操作鼠标事件及页面元素属性修改的相关技巧,需要的朋友可以参考下2015-07-07
jquery.form.js实现将form提交转为ajax方式提交的方法
这篇文章主要介绍了jquery.form.js实现将form提交转为ajax方式提交的方法,涉及jQuery插件实现form表单的Ajax提交技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了jQuery实现简易聊天框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
今天针对这个JQuery里面的toggle聊几句，文章中涉及到了一些问题望牛牛们能帮忙解惑一下。2009-11-11
最近从朋友那儿听说，写JavaScript，JQuery是个不错的东东，市场份额达到70%之巨。所以去下载了一份体验了一下。2009-04-04
下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
卷帘效果在生活中应用比较广泛，因为它的视觉效果比较不错，本文用代码实现一个，感兴趣的朋友不妨了解一下，或许对你学习jquery有所帮助,好了话不多说切入正题2013-02-02
用jquery来判断浏览器类型，如果只是仅仅为了判断浏览器的类型而使用该方法,那么不建议使用，只是在你已经使用了jquery才建议使用，因为没必要因为这么小的一个功能就加载那么大的类库吧2012-11-11
这篇文章主要介绍了jQuery实现默认是闭合的FAQ展开效果菜单,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
一个JQuery操作Table的代码分享，需要的朋友可以参考下2012-03-03
最新评论