jQuery 追加元素的方法如append、prepend、before


Posted in Javascript onJanuary 16, 2014

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.3water.com/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>

运行后效果图:

jQuery 追加元素的方法如append、prepend、before

html结构图

jQuery 追加元素的方法如append、prepend、before

Javascript 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 #Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 #Javascript
jquery sortable的拖动方法示例详解
Jan 16 #Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 #Javascript
js查找某元素中的所有图片地址的方法
Jan 16 #Javascript
jQuery - css() 方法示例详解
Jan 16 #Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 #Javascript
You might like
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
工程监理应届生求职信
2013/11/09 职场文书
银行柜员应聘推荐信范文
2013/11/24 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
高中生逃课检讨书
2014/10/10 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
借条如何写
2015/05/26 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
python开发制作好看的时钟效果
2022/05/02 Python