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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php微信开发自定义菜单
2016/08/27 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
js查找节点的方法小结
2015/01/13 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
20招让你的Python飞起来!
2016/09/27 Python
pip安装python库的方法总结
2019/08/02 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
医生实习工作总结的自我评价
2013/09/27 职场文书
开业庆典答谢词
2014/01/18 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015选调生工作总结
2015/07/24 职场文书
企业财务管理制度范本
2015/08/04 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
我的收音机情缘
2022/04/05 无线电