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

由于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. kafka集群安装与配置

    一.集群安装 1. Kafka下载: 可以从kafka官方网站(http://kafka.apache.org)上找到下载地址,再wgetwget http://mirrors.cnnic.cn/ap ...

  2. AIDL实现Android IPC

    1.AIDL文本解释 在软件工程中,接口定义语言(IDL)已经成为通用术语,是用来描述软件组件接口的特定语言.在Android中,该IDL被称为Android接口定义语言(AIDL),它是纯文本文件, ...

  3. Android 侧滑菜单的简单实现（SlidingMenu）二

    在上一篇博文中已经简单的实现了侧滑菜单,代码也很简单,就几行代码. 这篇文章依然讲侧滑菜单,与前一篇文章不同的是,这篇文章用不同的代码方式来实现侧滑菜单. 在前面的文章中已经用了在Activity中通 ...

  4. In-App-Purcharse 官方原文摘要笔记

    这并不是一篇关于 In-App-Purcharse 的专业深入分析文章,只是在初次浏览有关IAP官方文档后记录的一些需要注意的地方,就像是课堂笔记. 因为这是原版.并且涉及到支付的内容,所以就不翻译, ...

  5. java SimpleDateFormat非线程安全测试

    public class MyThread extends Thread { private SimpleDateFormat sdf; private String dateString; publ ...

  6. 方法：Linux 下用JAVA获取CPU、内存、磁盘的系统资源信息

    CPU使用率: InputStream is = null; InputStreamReader isr = null; BufferedReader brStat = null; StringTok ...

  7. tip 2：找最小公倍数之Boost

    今天在codewars上面做了一题,kata5的,其中一个实现函数是几个数字的最小公倍数.自己的代码编译虽然也成功了,但是不够简介.看了别人的代码才发现可以直接调用Boost的math模块. 看eff ...

  8. 【转】TCP的SEQ和ACK的生成

    TCP序列号和确认号详解 完整的PDF下载: 在网络分析中,读懂TCP序列号和确认号在的变化趋势,可以帮助我们学习TCP协议以及排查通讯故障,如通过查看序列号和确认号可以确定数据传输是否乱序.但我在查 ...

  9. 模板与继承之艺术——奇特的递归模板模式（CRTP）

    一.什么是CRTP 奇特的模板递归模式(Curiously Recurring Template Pattern)即将派生类本身作为模板参数传递给基类. template<typename T& ...

  10. java学习笔记_GUI(3)

    如何加入自己定义的Panel import javax.swing.*; import java.awt.event.*; import java.awt.*; 5 class MyPanel ext ...