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修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
详解vue组件之间的通信
Aug 30 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python中几种自动微分库解析
2019/08/29 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python关于调用函数外的变量实例
2019/12/26 Python
python 命名规范知识点汇总
2020/02/14 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
读群众路线心得体会
2014/03/07 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
中学生家长评语大全
2014/04/16 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
师德师风个人总结
2015/02/06 职场文书
找规律教学反思
2016/02/23 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
详解Java实现数据结构之并查集
2021/06/23 Java/Android
python文件与路径操作神器 pathlib
2022/04/01 Python
使用python绘制分组对比柱状图
2022/04/21 Python