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 09 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
JS实现瀑布流效果
Mar 07 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
特殊情况下如何获取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 中的批处理的实现
2007/06/14 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JS 表单验证大全
2011/11/23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
生活部的活动方案
2014/08/19 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫