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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
深入理解js promise chain
May 05 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
vue之数据交互实例代码
Jun 20 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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/05/10 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python中使用中文的方法
2011/02/19 Python
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python字符串格式化
2015/06/15 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python web基础之加载静态文件实例
2018/03/20 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
xxx同志考察材料
2014/02/07 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL