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 相关文章推荐
table行随鼠标移动变色示例
May 07 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
AngularJS实现多级下拉框
Mar 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
php用正则表达式匹配中文实例详解
2013/11/06 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php文件上传简单实现方法
2015/01/24 PHP
php验证手机号码
2015/11/11 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
JS无限级导航菜单实现方法
2019/01/05 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python实现合并两个排序的链表
2019/03/03 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
学生处主任岗位职责
2013/12/01 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书