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 相关文章推荐
JSON语法五大要素图文介绍
Dec 04 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
如何使用angularJs
May 08 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
animate.css在vue项目中的使用教程
Aug 05 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
vue制作toast组件npm包示例代码
Oct 29 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版
2006/10/09 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
教育专业自荐书范文
2013/12/17 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
入党自荐书范文
2014/03/09 职场文书
乔迁之喜主持词
2014/03/27 职场文书
推普周活动总结
2014/08/28 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
关于python类SortedList详解
2021/09/04 Python
Python保存并浏览用户的历史记录
2022/04/29 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python