jQuery 如何先创建、再修改、后添加DOM元素


Posted in Javascript onMay 20, 2014

如何一气呵成地,on the fly地操作DOM元素呢?

例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。

由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行。

首先创建一个p元素,内容包含一个a元素。

$('<p><a>jQuery</a></p>')

然后为a元素添加一个href属性
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com')

最后把新添加的p元素添加到body中
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body')

注意,这个地方需要执行end()操作,否则添加到body中的元素不是p元素变成了p元素中的a元素。

其实,end()操作不能等价与撤销,它返回的是previous selection,但是这个selection已经被end之前的操作修改过。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<body> 
<script type="text/javascript" src="jquery-1.11.1.js"></script> 
<script type="text/javascript"> 
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jqeury.com').appendTo('body'); 
</script> 
</body> 
</html>

页面代码
jQuery 如何先创建、再修改、后添加DOM元素
Javascript 相关文章推荐
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
js精确的加减乘除实例
Nov 14 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
特殊情况下如何获取span里面的值
May 20 #Javascript
jQuery基于当前元素进行下一步的遍历
May 20 #Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 #Javascript
php实例分享之实现显示网站运行时间
May 20 #Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 #Javascript
JQuery弹出层示例可自定义
May 19 #Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JQuery 常用操作代码
2010/03/14 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python+POP3实现批量下载邮件附件
2018/06/19 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
医学毕业生自荐信
2013/10/11 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
采购助理岗位职责
2014/02/16 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js