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 刷新全集常用代码
Nov 22 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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中实现精确设置session过期时间的方法
2014/07/17 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
零基础php编程好学吗
2019/10/11 PHP
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
星球大战与Python之间的那些事
2016/01/07 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python常见数据类型转换操作示例
2019/05/08 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
机关搬迁方案
2014/05/18 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
内勤岗位职责范本
2015/04/13 职场文书
亮剑观后感
2015/06/05 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript