jQuery添加新内容的四个常用方法分析【append,prepend,after,before】


Posted in jQuery onMarch 19, 2019

本文实例讲述了jQuery添加新内容的四个常用方法。分享给大家供大家参考,具体如下:

添加新内容的四个 jQuery 方法区别如下:

append() - 在被选元素(里面)的结尾插入内容

prepend() - 在被选元素(里面)的开头插入内容

//jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");
//jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");

通过 append() prepend() 方法添加若干新元素

function appendText()
{
var txt1="<p>Text.</p>";        // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);     // 追加新元素
}

after() - 在被选元素(外面)之后插入内容

before() - 在被选元素(外面)之前插入内容

$("img").after("Some text after");
$("img").before("Some text before");

通过 after() before() 方法添加若干新元素

function afterText()
{
var txt1="<b>I </b>";          // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");   // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);     // 在 img 之后插入新元素
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
详解jQuery-each()方法
Mar 13 #jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python监控文件或目录变化
2016/06/07 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python: 传递列表副本方式
2019/12/19 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
禁止酒驾标语
2014/06/25 职场文书
小学教师个人总结
2015/02/05 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python