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 常用方法总结
Jun 03 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
js 自动播放的实例代码
Nov 19 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
jQuery事件详解
Feb 23 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
详解小程序横屏方案对比
Jun 28 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
第八节--访问方式
2006/11/16 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
vue生命周期的探索
2019/04/03 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
学习标兵获奖感言
2014/02/20 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
如何利用python实现列表嵌套字典取值
2022/06/10 Python