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

由于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. Unity3D 之暂停和继续的实现

    Time.timeScale 时间缩放 当timeScale传递时间1.0时和实时时间一样快.当timeScale传递时间0.5时比实时时间慢一半. 当timeScale传递时间为0时游戏基本上暂停了 ...

  2. Asp.net MVC 4 动作方法结果

    Action Method Result动作方法结果 ActionResult generic return value for an action and is used to perform a ...

  3. JSP之初识2

    <与%之间不可有空格,但是后面可以有空格 <%@ page language="java" import="java.util.*" pageEnc ...

  4. SQL_转换格式的函数—CAST()和CONVERT()

    将一种数据类型的表达式显式转换为另一种数据类型的表达式.CAST 和 CONVERT 提供相似的功能. cast SELECT CAST('12.5' AS int) --在将 varchar 值 ' ...

  5. T-SQL 使用链接库向mysql导数据遇到的奇葩事件一

    mysql表结构有 主键 非自增 text longtext类型字段多个 步骤 1.在T-SQL 临时表中处理好所有需要的字段 2.执行openquery语句 字段顺序完全按照mysql字段顺序插入 ...

  6. PowerDesigner16.5 生成SQL脚本执行出错：collate chinese_prc_ci_as

    PowerDesigner16.5 生成SQL脚本执行出错, collate chinese_prc_ci_as 点DataBase-edit current dbms —— 左边Script - O ...

  7. 使用EntityFramework连接 Mysql

    原文:使用EntityFramework连接 Mysql 1,安装VS.net 插件 http://forums.mysql.com/read.php?174,601041,601041 2,安装连接 ...

  8. iOS安全——代码混淆&反编译

    本文是初步了解和集成网上的相关反编译博客, 并做公司内部技术人员分享研讨PPT.

  9. c#基础笔记-----------集合

    首先所谓集合是用于管理对象的容器类.一方面集合将独立的对象汇集成群集,作为一个群集来管理,以便进行整体性操作:而另一方面,集合可以方便地获取群集中的个体,进行个体化操作.在.Net中,集合被封装为对象 ...

  10. JAVA_SE复习（OOP1）

    面向对象编程(一) 一.继承 1. 在类图表示中,使用一个分为三块的矩形表示一个类.矩形的第一块表示类名,第二块描述这个类的属性及属性的数据类型,第三块描述这个类的操作,也就是方法以及返回类型.    ...