例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。

由于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元素的更多相关文章

  1. IntelliJ IDEA 创建web项目后添加Java EE （Tomcat）的依赖包

    本文讲述的是IntelliJ IDEA 12版本 如果在编译器中创建一个web项目后,没有设置tomcat的依赖包,就不能成功的编译,会缺少javax.servlet.*等类. 添加的方法是: 打开p ...

  2. VS2015创建类库项目后添加不了WPF资源字典，窗口，用户控件处理办法

    打开项目工程文件在PropertyGroup标签最后加上下面3行: <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FA ...

  3. VS2017创建类库项目后添加不了WPF资源字典

    第一步: 先找到你需要添加的库类工程文件,位置如下: 第二步: 使用记事本文件打开,找到图片的位置,把三行代码粘贴进去,保存文件.重新打开项目: 三行代码如下: <ProjectTypeGuid ...

  4. 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度

  5. jquery on=>keyup无法绑定未来js添加的元素

    $("[name=red_count]").on("keyup", countKeyUpBind);即使使用on的,也无法绑定未来元素, 所以直接在动态添加的时 ...

  6. createElement创建标签及appendChild添加到元素的后面

    var p = document.createElement('p'); var box = document.getElementsByTagName('div')[0]; box.appendCh ...

  7. JS添加DOM元素CSS权重BUG

    修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...

  8. 在容器最前面添加DOM元素 parent.insertBefore(new, parent.children[0])

    //判断容器当前有没有子级元素,如果没有直接appendChild就行了; if (p.children[0]) { p.insertBefore(span, p.children[0]); } el ...

  9. jQuery中动态创建、添加元素的方法总结

    <input type="button" value="创建元素" id="btn"> <div id="box ...

随机推荐

  1. this及其作用域（函数外部this变量的调用）

    众所周知的一件麻烦事是函数外部的this变量都不可见,但是我们在编写使用局部函数的方法时,却又很可能需要在某一时刻从内部函数访问this变量. 这种情况下可以通过在this变量中存储一个需要的信息(例 ...

  2. Linux 命令 - route: 显示或操作路由表

    route 命令查看路由表或者手动地添加.删除和修改路由表中的条目. 命令格式 route [-CFvnNee] [-A family] route [-v] [-A family] add [-ne ...

  3. 浅谈Oracle 性能优化

    基于大型Oracle数据库应用开发已有6个年头了,经历了从最初零数据演变到目前上亿级的数据存储.在这个经历中,遇到各种各样的性能问题及各种性能优化. 在这里主要给大家分享一下数据库性能优化的一些方法和 ...

  4. ASP.NET网站前端页面的复制

    网络普及的时代,遇到问题的首要解决方案并不是问人,而是找度娘.当我们找一些技术性的问题时,会发现很多解决方案在博客里,看看博主发表的博客总是惊叹不已,想要自己也有这么一个好习惯,把学到的东西以自己的方 ...

  5. android64位机子兼容32位.so库文件

    http://blog.csdn.net/vhawk/article/details/49964475 猴子在调用高德地图的时候,遇到一个操作系统兼容问题,异常堆栈说是找不到so库文件,猴子就不懂了, ...

  6. Python Quick Start

    1.安装Python 官网下载python: https://www.python.org/ 有2.x 3.x版本, 注意,python3.0不向下兼容2.x版本,有很多包3.0不提供 下载完后直接点 ...

  7. Swift常量和变量以及命名规范

    我们在上一章中介绍了如何使用Swift编写一个HelloWorld小程序,其中就用到了变量.常量和变量是构成表达式的重要组成部分.常量在声明和初始化变量时,在标识符的前面加上关键字let,就可以把该变 ...

  8. JavaScript学习笔记(10)——JavaScript语法之操作DOM

    1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:doc ...

  9. apache重写字段详细说明

    用Apache虚拟主机的朋友很多,apache提供的.htaccess模块可以为每个虚拟主机设定rewrite规则,这对网站SEO优化相当有用,同时也改善了用户体验.国内的虚拟机一般不提供.htacc ...

  10. JasperReport原理解析之（一）

    1. [加载原始文件]有iReport生成jrxml文件后,由jasperreport包中的类JRXml文件 加载和解析 jrxml文件. 文件解析后生成  JasperDesign对象. Jaspe ...