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 核心函数以及jQuery对象
Mar 23 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JavaScript Date对象详解
Mar 01 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
vue实现简易计算器功能
Jan 20 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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
js中复制行和删除行的操作实例
2013/06/25 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python3实现单目标粒子群算法
2019/11/14 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
贺卡寄语大全
2014/04/11 职场文书
安全生产月标语
2014/10/07 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
辩护词格式
2015/05/22 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python