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 相关文章推荐
jquery移动listbox的值原理及代码
May 03 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
高中自我鉴定范文
2013/11/03 职场文书
课程设计心得体会
2013/12/28 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
老师对学生的评语
2014/04/18 职场文书
2014年招商工作总结
2014/11/22 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA