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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
JS实现div居中示例
Apr 17 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue自定义组件实现双向绑定
Jan 13 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
浅析is_writable的php实现
2013/06/18 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
js option删除代码集合
2008/11/12 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python 生成图形验证码的方法示例
2018/11/11 Python
python 中如何获取列表的索引
2019/07/02 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
pandas的相关系数与协方差实例
2019/12/27 Python
django实现后台显示媒体文件
2020/04/07 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
大学生操行评语大全
2014/12/31 职场文书
党小组意见范文
2015/06/08 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server