怎样一气呵成地。on the fly地操作DOM元素呢？

比如顺序运行【创建】-> 【改动】-> 【加入】三个动作。

因为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 -&gt; 怎样【先创建、再改动、后加入】 DOM元素的更多相关文章

  1. 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法

    资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...

  2. jQuery 如何先创建、再修改、后添加DOM元素

    例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素, ...

  3. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  4. jQuery支持移动Mobile的DOM元素移动和缩放插件

    jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加 ...

  5. jQuery -&gt; 获取指定上下文中的DOM元素

    jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE ...

  6. 使用 jQuery Deferred 和 Promise 创建响应式应用程序

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...

  7. 【java开发系列】— JDOM创建、改动、删除、读取XML文件

    有非常多中操作XML文件的方法,这里介绍一下JDOM的用法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每一个文档元素都是一个document元素的子节点. 而每一个子元 ...

  8. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  9. JQuery 之 在数据加载完成后才自动执行函数

    数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...

随机推荐

  1. JavaString库

    String库 .length() 字符串的长度,一个字符串为空(空字符串对象)和null(不指向任何对象)是两个概念,中文字符和英文字符是一样的计数(一个中文是一个字符,一个英文字母是一个字符) . ...

  2. MyBatis学习总结（8）——Mybatis3.x与Spring4.x整合

    一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetype:create -DgroupId=me.gacl -DartifactId=spring4-myba ...

  3. web_custom_request函数做get接口测试

    最近研究了使用loadrunner做接口测试,刚开始一直不成功,后来加了QQ群,遇到大神了,经指导终于成功 下面是具体实例代码: //{"signIOS":1,"sign ...

  4. Java分布式爬虫Nutch教程——导入Nutch工程，执行完整爬取

    Java分布式爬虫Nutch教程--导入Nutch工程,执行完整爬取 by briefcopy · Published 2016年4月25日 · Updated 2016年12月11日 在使用本教程之 ...

  5. 洛谷——P3258 [JLOI2014]松鼠的新家

    https://www.luogu.org/problem/show?pid=3258 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到 ...

  6. HDU 3240

    求卡特兰数前N项的和模M. 直接求必定是不可能的,卡特兰数太大了.想了好久,本打算把位数拆成素数相乘,然后记录下各素数的个数计算.可惜,TLE....因为N太大了. 除法必定是要用到逆元的,但分母与M ...

  7. WCF 无法激活服务，由于它不支持 ASP.NET 兼容性。已为此应用程序启用了 ASP.NET 兼容性

    作者:jiankunking 出处:http://blog.csdn.net/jiankunking 错误信息: 无法激活服务.由于它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NE ...

  8. Visual C++文件后缀名释义

    [1] .APS:存放二进制资源的资源辅助中间文件(可加快资源装载速度). [2] .BMP:位图资源文件. [3] .BSC:浏览信息文件.由浏览信息维护工具(BSCMAKE)从原始浏览信息文件(. ...

  9. 51nod-1359: 循环探求

    [传送门:51nod-1359] 简要题意: 给出n和k,求出最小的x满足$n^{x}≡n(mod\;10^{k})$ 题解: 真是一道有(du)趣(liu)题目 首先我们设X[k-1]为$n^{x} ...

  10. [poj 3349] Snowflake Snow Snowflakes 解题报告 （hash表）

    题目链接:http://poj.org/problem?id=3349 Description You may have heard that no two snowflakes are alike. ...