怎样一气呵成地。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. web前端项目规范

    项目目录规范 . ├─ css ├─ component ├─ img ├─ js ├─ page ├─ test ├─ package.json ├─ README.md css 存放样式类文件,且 ...

  2. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  3. tcpdump的使用以及参数详解

    平时分析客户端和服务器网络交互的问题时,很多情况下需要在客户端和服务器抓包分析报文.一般win下抓包使用WireShark即可,但是linux下就需要用到tcpdump了,下面是一些对于tcpdump ...

  4. [using_microsoft_infopath_2010]Chapter3 表单设计基础：使用InfoPath布局，控件，和视图

    本章概要 1.使用InfoPath的布局工具构建吸引人的表单 2.使用InfoPath表格工具 3.在表单上添加字段和控件 4.使用section和container组织表单里的控件 5.在一个表单上 ...

  5. 四旋翼飞行器Quadrotor飞控之 PID调节（參考APM程序）

    做四轴也有一段时间了.近期一直在做PID方面的工作. 如今四轴基本能够实现室内比較稳定的飞行,操控手感也能够接受.稍后上试飞视频.在此把一些PID方面的经验总结总结和大家分享一下. 首先介绍一下大概的 ...

  6. 宿主机mac os无法连接到虚拟机centos

    宿主机: Mac OS 10.9.2 虚拟机: [root@localhost ~]# cat /etc/redhat-release CentOS release 6.4 (Final) [root ...

  7. JavaScript DOM(一)

    文件夹: DOM家谱树 节点的基本属性和方法 document与getElement方法 DOM家谱树 DOM能够将不论什么HTML或XML文档描绘成一个由多层次节点构成的结构.当中节点被分为几种不同 ...

  8. 屌丝也能开发安卓版2048（App Inventor）

    想编写安卓游戏.java太难.来试试App Inventor.尽管有人觉得他是中学生的玩具,可是也能编写2048这种火爆游戏,不须要太复杂的算法. 整个游戏有几个模块: 一.游戏初始化 数列转化为图形 ...

  9. 【笨木头Lua专栏】基础补充02：函数的几个特别之处

    没想到距离上一篇基础补充已经过了1年多了,近期准备捡回Lua,把基础都补补,今天来聊聊Lua的函数吧~ 0.环境 我突然对Lua又大感兴趣的最主要原因是,Cocos Code IDE開始浮出水面了,它 ...

  10. bzoj3993: [SDOI2015]星际战争(网络流)

    3993: [SDOI2015]星际战争 题目:传送门 题解: 洛谷AC了,但是因为bzoj的spj有问题所以暂时没A 一道老题目了,二分时间然后网络流判断. 每次st-->武器连时间*攻击力 ...