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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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读取大文件示例分享(文件操作类)
2014/04/13 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php简单实现快速排序的方法
2015/04/04 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python实现指定ip端口扫描方式
2019/12/17 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
2013年高中生自我评价
2013/10/23 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
女大学生自我鉴定
2013/12/09 职场文书
座谈会主持词
2014/03/20 职场文书
司法所长先进事迹
2014/06/02 职场文书
运动会的口号
2014/06/09 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
少年犯观后感
2015/06/11 职场文书
导游词之江西赣州
2019/10/15 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
全网非常详细的pytest配置文件
2022/07/15 Python