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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP session有效期问题
2009/04/26 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python模糊图片过滤的方法
2018/12/14 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python合并多个excel文件的示例
2020/09/23 Python
Django 实现图片上传和下载功能
2020/12/31 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
运动会100米解说词
2014/01/23 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
教师求职自荐信
2015/03/26 职场文书
获奖感言一句话
2015/07/31 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis