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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
Angular短信模板校验代码
Sep 23 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Flask之flask-script模块使用
2018/07/26 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 利用zmail库发送邮件
2020/09/11 Python
使用django自带的user做外键的方法
2020/11/30 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
个人函授自我鉴定
2014/03/25 职场文书
说明书怎么写
2014/05/06 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python