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

由于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的static关键字

    通常来说,当你创建类时,就是在描述那个类的对象的外观与行为.除非你用new创建那个类的对象,否则,你实际上并未获得任何东西.当你用new来创建对象时,数据存储空间才被分配,其方法才供外界调用. 但是有 ...

  2. Java之绘制艺术图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.Color; import java.awt.Graphics; import j ...

  3. Java之绘制方法

    绘制图形所用的函数类别分别为视图类.图形单元类和页面类. 对视图类,设置窗口的位置和大小: 对图形单元类,设置图形边界: 对页面类,只有当页面作为元件,该函数才起作用,设置元件边界. 一般构建窗口我们 ...

  4. java createSQLQuery().list()返回日期格式没有时分秒的解决方法

    方法一 将Oracel数据库对应表中“收单时间的字段”receive_sheet_time,由原来的Date类型改为timestamp 然后,在java程序中,由 (java.util.timesta ...

  5. 常用DOM笔记

    1,获取元素方法: (1),获取单个,返回一个元素 element.getElementById()//最快,实时 element.querySelector() (2)获取多个,返回一组 eleme ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  7. Unity基本操作一

    1,使对象进入摄像机镜头内align with view 2,太阳光 创建点point light,调节Intensity改变光照强度,上面的Range改变光照范围. 3,Animation选中Pla ...

  8. DML_数据操纵语言

    DML语法:         insert  注意点:1.在表后可以有括号,表明  所插入的值是哪几列,但是一定要包括所有的not null属性                             ...

  9. 利用HibernateTools从数据库表生成带注解的POJO

    在SSH框架中,如果先设计好了数据库,那么下一步就需要从数据库Table生成实体java类和hbm.xml配置文件.在最新的开发框架中,已经支持使用注解,从而避免了繁琐的hbm.xml配置,而且我们可 ...

  10. Cassandra1.2文档学习（16）—— 模式的变化

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_schema ...