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动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
jquery remove方法应用详解
2012/11/22 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python框架django基础指南
2016/09/08 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python占用的内存优化教程
2019/07/28 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
公司前台辞职报告
2014/01/19 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
党支部四风整改方案
2014/10/25 职场文书
2014年民警工作总结
2014/11/25 职场文书
维稳工作承诺书
2015/01/20 职场文书