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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
JavaScript实现Excel表格效果
Feb 07 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版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php微信开发之关注事件
2018/06/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
js中this用法实例详解
2015/05/05 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python字典多条件排序方法实例
2014/06/30 Python
Python异常处理总结
2014/08/15 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python爬虫文件下载图文教程
2018/12/23 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
结束运行python的方法
2020/06/16 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python 实现客户端与服务端的通信
2020/12/23 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
责任书范本
2014/08/25 职场文书
邀请函样本
2015/02/02 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
宣传委员竞选稿
2015/11/19 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL