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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
咖啡知识大全
2021/03/03 新手入门
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python如何在bool函数中取值
2020/09/21 Python
python安装sklearn模块的方法详解
2020/11/28 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
SQL SERVER面试资料
2013/03/30 面试题
董事长助理工作职责范本
2014/07/01 职场文书
党的群众路线调研报告
2014/11/03 职场文书
二手房购房意向书
2015/05/09 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP