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获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue props对象validator自定义函数实例
Nov 13 Javascript
详解JavaScript 高阶函数
Sep 14 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
在视频前插入广告
2006/11/20 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
python实现爬取图书封面
2018/07/05 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
一组SQL面试题
2016/02/15 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
幼儿园大班家长评语
2014/04/17 职场文书
正科级干部考察材料
2014/05/29 职场文书
求职信的正确写法
2014/07/10 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
岁月神偷观后感
2015/06/11 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
使用Django实现商城验证码模块的方法
2021/06/01 Python