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

由于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. Java Concurrency - Concurrent Collections

    Data structures are a basic element in programming. Almost every program uses one or more types of d ...

  2. 【Cocos2d入门教程六】Cocos2d-x事件篇之触摸

    Cocos游戏当中产生一个事件时,可以有多个对象在监听该事件,所以有优先级(Priority).优先级越高(Priority值越小),事件响应越靠前. 关系图: 新 事件分发机制:在2.x 版本事件处 ...

  3. 第十一篇、RxSwift

    三. 什么是函数式编程? 什么是函数式编程呢? 函数式编程其实是一种编程思想, 代码写出来只是它的表现形式. 在面向对象的编程思想中, 我们将要解决的一个个问题, 抽象成一个个类, 通过给类定义属性和 ...

  4. Cocos2d-x手机游戏开发中-组合动作

    动作往往不是单一,而是复杂的组合.我们可以按照一定的次序将上述基本动作组合起来,形成连贯的一套组合动作.组合动作包括以下几类:顺序.并列.有限次数重复.无限次数重复.反动作和动画.动画我们会在下一节介 ...

  5. 关于iOS9中配置App Transport Security(应用程序传输安全协议)

    在 在info.plist中,进行上面的配置就行了,注意的是,那个网址,你需要访问什么网址,就填写什么网址就行了. NSTemporaryExceptionAllowsInsecureHTTPLoad ...

  6. reduce + Promise 顺序执行代码

    本文地址: http://www.cnblogs.com/jasonxuli/p/4398742.html 下午的太阳晒得昏昏沉沉,和上周五一样迷糊,看一段代码半天没看明白,刚才不知不觉眯了几分钟,醒 ...

  7. Adapter模式

    Adapter模式主要用于将一个类的接口转换为另外一个接口,通常情况下再不改变原有体系的条件下应对新的需求变化,通过引入新的适配器类来完成对既存体系的扩展和改造.实现方式主要包括: 1.类的Adapt ...

  8. item44：将与参数无关的代码抽离template

    编写non-template代码中,重复十分明显:可以很直观的看到代码的重复,然后将它们写成一个新的class或者函数,然后供调用. 编写template代码中,重复是隐晦的:只存在一份templat ...

  9. Contest1065 - 第四届“图灵杯”NEUQ-ACM程序设计竞赛（个人赛）E粉丝与分割平面

    题目描述 在一个平面上使用一条直线最多可以将一个平面分割成两个平面,而使用两条直线最多可将平面分割成四份,使用三条直线可将平面分割成七份--这是个经典的平面分割问题,但是too simple,作为一个 ...

  10. 引用、return

    C语言中没有引用,引用(reference)是c++对c语言的重要扩充.通俗点说,引用就是“起别名”.比如变量data,和它的引用 RefData.虽然名字不同,但是操作他们的时候,都操作的是相同的内 ...