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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
twig模板常用语句实例小结
2016/02/04 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
React中的refs的使用教程
2018/02/13 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
实习单位接收函
2014/01/11 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
家长给孩子的评语
2014/01/30 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
大学新学期计划书
2014/04/28 职场文书
2014年终工作总结范本
2014/12/15 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书