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 对表格的行和列都能加亮显示
Dec 26 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JavaScript 异步调用
Oct 25 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 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无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php实现异步数据调用的方法
2015/12/24 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
模拟select的代码
2011/10/19 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python破解zip加密文件的方法
2018/05/31 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python小白学习包管理器pip安装
2020/06/09 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
帮一个朋友写的求职信
2014/08/09 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
人民调解协议书范本
2014/10/11 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
小型婚礼主持词
2015/06/30 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python