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 03 jQuery
jquery仿微信聊天界面
May 06 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python入门教程 python入门神图一张
2018/03/05 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python 错误处理 assert详解
2020/04/20 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
优秀生推荐信范文
2013/11/28 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript