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 动态循环输出表格具体方法
Nov 23 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
node.js通过url读取文件
Oct 16 Javascript
JavaScript实现缓动动画
Nov 25 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
ini_set的用法介绍
2014/01/07 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
收集前端面试题之url、href、src
2018/03/22 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python实现石头剪刀布程序
2021/01/20 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
酒店管理毕业生自荐信
2013/10/24 职场文书
经理秘书岗位职责
2013/11/14 职场文书
党校培训思想汇报
2014/01/03 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
小学校园广播稿
2015/08/18 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang