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

由于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. No Dialect mapping for JDBC type: -1

    MySQL数据库中有张表的字段是text,查询出来后对应的java类型是String,Dialect设置为org.hibernate.dialect.MySQLDialect 运行的时候报错:No D ...

  2. 【转载】Apache Kafka监控之Kafka Web Console

    http://www.iteblog.com/archives/1084 Kafka Web Console是一款开源的系统,源码的地址在https://github.com/claudemamo/k ...

  3. JS定位PDF页码。

    由于项目中的PDF文章段落标题有些是英文,对其翻译后需要定位到具体的页码. 查询相关资料及进行尝试后发现可以用如下方法可以实现 function gotoPage(page) {            ...

  4. Ajax B/S 聊天工具txt文件保存

    打算做一个两个或多个网页之间交流的功能,思路是多个页面聊天的内容存放到一个文件里,每个页面都有提交聊天功能,当提交聊天信息时保存到上面那个文件里, 在每个也页面里放一个定时器,每秒钟获取聊天文件里的记 ...

  5. 开发Android应用 提升性能的小技巧

    前 言 2015年,Android OS 目前在手机操作系统的市场占有率已达59%,权威机构预计,Android市场占有率在2016年将达到63%,由于Android的开放性,未来占有率还将不断增加, ...

  6. 正则Match

    Match match = Regex.Match("result=23&asdf=asdf", @"result=(\d+)&"); if ( ...

  7. css3中定义required,focus,valid和invalid样式

    css3 提示只适用于高级浏览器: ChromeFirefoxSafariIE9+ valid.invalid.required的定义  代码如下 复制代码 input:required, input ...

  8. Git 的简单使用

    一直在使用Git,仅限于简单的使用,但还是记不住几个简单.在这边总结一下,加深印象,也方便查找. 安装Git 平常主要在windows和ubuntu上工作,就以windows为例,Linux和Mac平 ...

  9. Js 中的this

    关于this This代表"当前"对象 谁调用就代表谁 行内绑定 不带参数 行内绑定 带参数 this 当前对象 Object HTMLInputElement 动态绑定 要获取自 ...

  10. 关键字 static

    A. 面向过程: 1. 静态全局变量:在全局变量前,加上关键词static,该变量就被定义成为一个静态全局变量. 1.1. 特点: |该变量在全局数据区分配内存: |未经初始化的静态全局变量会被程序自 ...