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 DIV弹出效果实现代码
Jul 03 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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
php empty() 检查一个变量是否为空
2011/11/10 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python类中self参数用法详解
2020/02/13 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
Laravel中Kafka的使用详解
2021/03/24 PHP
中英文求职信范文
2014/01/27 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
小学教师师德反思
2014/02/03 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
医院营销工作计划
2015/01/16 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
治庸问责工作总结
2015/08/11 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript