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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Jquery Datatables的使用详解
Jan 30 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
servlet面试题
2012/08/20 面试题
自我鉴定200字
2013/10/28 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
学校党员干部承诺书
2015/05/04 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python