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 按回车键相应按钮提交事件
Nov 02 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
特殊情况下如何获取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性能的21种方法介绍
2013/06/25 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
smarty简单入门实例
2014/11/28 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中字典映射类型的学习教程
2015/08/20 Python
python中lambda()的用法
2017/11/16 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python-opencv 双线性插值实例
2020/01/17 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
大学生党课思想汇报
2013/12/29 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
入党自传范文2015
2015/06/26 职场文书
通知怎么写?
2019/04/17 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
亲情作文之母爱
2019/09/25 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis