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 校验中国身份证号码实例详解
Apr 11 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP生成条形图的方法
2014/12/10 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
js实现搜索栏效果
2018/11/16 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python实现员工管理系统
2018/01/11 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Scrapy框架使用的基本知识
2018/10/21 Python
关于python多重赋值的小问题
2019/04/17 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
简单的Python人脸识别系统
2020/07/14 Python
params有什么用
2016/03/01 面试题
小学运动会班级口号
2014/06/09 职场文书
群教班子对照检查材料
2014/08/26 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
公司与个人合作协议书
2016/03/19 职场文书