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

如何一气呵成地,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>

页面代码

时间: 2024-09-13 07:00:16

jQuery 如何先创建、再修改、后添加DOM元素_jquery的相关文章

《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素

1.10 创建.操作和插入DOM元素 1.10.1 问题 你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中. 1.10.2 解决方案 你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行.如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素.例如,下列语句将创建一个包装在< p>元素中的< a>元素,在< p>和< a>元素中还封装了一个文本节点: jQuery(

《jQuery Cookbook中文版》——1.5 过滤DOM元素包装器集

1.5 过滤DOM元素包装器集 1.5.1 问题 在jQuery包装器集中有一组选中的DOM元素,但是打算从集合中删除不匹配新指定表达式的元素,以创建一个新的操作元素集合. 1.5.2 解决方案 jQuery过滤器方法用于DOM元素的jQuery包装器集,可以排除不符合指定表达式的元素.简言之,可以用filter()方法过滤当前元素集,这是过滤器方法与jQuery查找方法的重要区别,查找方法通过寻找(使用新的选择器变量)新元素(包括当前包装器集的子元素)来缩小DOM元素的包装器集. 为了理解过滤

jQuery函数的第二个参数获取指定上下文中的DOM元素_jquery

jQuery函数的第二个参数可以指定DOM元素的搜索范围. 第二个参数可分为以下类型 DOM reference jQuery wrapper document 代码示例 复制代码 代码如下: <!DOCTYPE html> <html> <body> <form> <input name="" type="checkbox"/> <input name="" type="

jQuery如何获取动态添加的元素_jquery

一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

jQuery增加、删除及修改select option的方法_jquery

本文实例讲述了jQuery增加.删除及修改select option的方法.分享给大家供大家参考,具体如下: jQuery获取Select选择的Text和Value: 1. //获取Select选择的Text var checkText=jQuery("#select_id").find("option:selected").text(); 2. //获取Select选择的option Value var checkValue=jQuery("#selec

jQuery学习笔记之创建DOM元素_jquery

利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码 代码如下:             var oNewP2 = document.crea

《jQuery Cookbook中文版》——1.11 删除DOM元素

1.11 删除DOM元素 1.11.1 问题 你想从DOM中删除元素. 1.11.2 解决方案 remove()方法可以用于从DOM中删除选中的元素集及其子元素.请看如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <h

《jQuery Cookbook中文版》——1.13 克隆DOM元素

1.13 克隆DOM元素 1.13.1 问题 你需要克隆/复制DOM的一部分. 1.13.2 解决方案 jQuery提供clone()方法复制DOM元素.它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了.结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素.在下面的代码中,将克隆一个< ul>元素,然后用插入方法appendTo()将这个副本附加到DOM中.实际上,在页面上插入了与现有的< ul>完全相同的一个

《jQuery Cookbook中文版》——1.12 替换DOM元素

1.12 替换DOM元素 1.12.1 问题你需要用新的DOM节点代替DOM中的现有节点. 1.12.2 解决方案使用replaceWith()方法,可以选择一组DOM元素进行替换.在下面的代码示例中,使用replaceWith()方法,将class属性为remove的所有元素替换为新的DOM结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x