怎样一气呵成地。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. pycharm 2018 3.4 for mac破解

    使用pycharm的小伙伴都知道,pycharm分为社区版和专业版,这里具体区别不作过多介绍.本文带大家安装mac版的2018 pycharm 3.4 1.去官网下载pycharm 3.4 for m ...

  2. java实现支付宝电脑支付(servlet版本)

    前期准备: 蚂蚁金融开放平台 进行登录操作 进入我的开放平台 在上方找到沙箱,进入沙箱(网络编程虚拟执行环境). 这里的RSA2密钥设置下,我已经设置好了,所以便有了支付宝公钥(公钥是对外公开的,私钥 ...

  3. 分库代价高的情况下，如何优化ES解决亿级数据量检索

    数据平台已迭代三个版本,从一开始遇到很多常见的难题,到现在终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,但愿能帮助大家少走些弯路,在此篇幅中偏重于ElasticSearch的优化 ...

  4. linux下使用DBCA(database configuration assistant)创建oracle数据库

    前提:切换到图形界面 到Oracle的bin文件夹下,使用oracle用户.运行dbca就可以.和windows的效果一样. 假设出现乱码 export LANG="en_US:UTF-8& ...

  5. C++语言笔记系列之十八——虚函数（1）

    1.C++中的多态 (1)多态性:同一个函数的调用能够进行不同的操作,函数重载是实现多态的一种手段. (2)联编:在编译阶段进行联接.即是在编译阶段将一个函数的调用点和函数的定义点联接起来. A.静态 ...

  6. $(window).load(function(){})跟$(document).ready(function(){})跟$(function(){})区别

    1.页面DOM加载完成 2.$(document).ready(function(){})  的简写是 $(function(){}) 执行 3.图片样式等所有HTML元素加载完毕 4.$(windo ...

  7. 什么是域名的TTL值？ ——一条域名解析记录在DNS缓存服务器中的存留时间

    什么是域名的TTL值? 转自:http://hizip.net/index.php/archives/20/TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间.当各地的 ...

  8. JQuery中的时间和动画

    我们知道JavaScript和HTML之间的交互是通过用户操作和浏览器成生成事件来完成的,比如当浏览钱加载完一个HTML文档或用户点击一个按钮都会生成一个事件,虽然利用传统的JavaScript事件可 ...

  9. System.IO.FileLoadException异常

    未能加载文件或程序集“NHibernate, Version=4.1.0.4000, Culture=neutral, PublicKeyToken=aa95f207798dfdb4”或它的某一个依赖 ...

  10. 092117-6265-01.dmp 蓝屏日志文件

    Microsoft (R) Windows Debugger Version 10.0.15063.137 AMD64 Copyright (c) Microsoft Corporation. All ...