《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素-阿里云开发者社区

开发者社区> 异步社区> 正文

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

简介: 在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:
+关注继续查看

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.10节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.10 创建、操作和插入DOM元素

1.10.1 问题
你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中。

1.10.2 解决方案
你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行。如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素。例如,下列语句将创建一个包装在< p>元素中的< a>元素,在< p>和< a>元素中还封装了一个文本节点:

jQuery('<p><a>jQuery</a></p>');
创建了元素之后,还可以使用jQuery方法对它进行进一步的操作,就像一开始就从现有的HTML文档中选择了< p>元素似的。例如,可以用.find()方法选择< a>元素,并设置它的一个属性。在下面的代码中,将其href属性设置为http://www.jquery.com

jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com');
这很棒,对吗?目前为止,所做的只不过是在运行中创建元素并在代码中进行操纵,实际上还可以做得更好。可以说,实际上还没有真正改变当前加载的DOM。想做到这一点,就必须使用jQuery提供的操纵方法。下面是在HTML文档上下文中的代码。在这段代码中将创建元素、在这些元素上进行操作,然后用操纵方法appendTo()将它们插入DOM中:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com')
 .end().appendTo('body');
</script>
</body>
</html>

请注意这里是如何使用end()方法撤消find()方法的,这样当调用appendTo()方法时,它将在DOM中附加包含在初始包装器集中的元素。

1.10.3 讨论
在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:

jQuery(document.createElement('p')).appendTo('body'); //在页面中添加一个空白的p元素
当然,如果用一个包含多个元素的HTML字符串就能正常工作,这么做可能就显得麻烦了,如何选择取决于具体的用法。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
array_unshift() 函数在数组开头插入一个或多个元素。被加上的元素作为一个整体添加,这些元素在数组中的顺序和在参数中的顺序一样 array_unshift()定义和用法 array_unshift() 函数在数组开头插入一个或多个元素。
695 0
jquery动画 -- 2.元素坐标动画效果(创建一个图片走廊)
  今天文章的内容是关于使用jquery的animate方法,修改html元素的position属性,创建一个图片走廊。效果预览图片:   大家可以下载demo看完整效果,下面介绍制作过程。   1.
773 0
从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1646 0
Apache Flink 零基础入门(四):客户端操作的 5 种模式
本文主要分享 Flink 的 5 种任务提交的方式。熟练掌握各种任务提交方式,有利于提高我们日常的开发和运维效率。
4500 0
Python+selenium 自动化-调用dom节点的click()监听事件,强力操作节点!穿透元素进行点击,节点被遮挡不可点击解决方法
Python+selenium 自动化-调用dom节点的click()监听事件,强力操作节点!穿透元素进行点击,节点被遮挡不可点击解决方法
17 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载