JQuery创建DOM元素方法解析

开发 前端
这里向大家描述一下如何创建DOM元素,通过给$()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素,相信本文介绍一定会让你有所收获。

你知道如何创建DOM元素吗,这里向大家描述一下,到目前为止可以看出,jQuery的作者使得$()函数(你的记忆里它只是jQuery()函数的别名而已)足够通用以便履行许多职责,从而避免把一堆全局性的名称引入JavaScript命名空间。

创建DOM元素

到目前为止可以看出,jQuery的作者使得$()函数(你的记忆里它只是jQuery()函数的别名而已)足够通用以便履行许多职责,从而避免把一堆全局性的名称引入JavaScript命名空间。好,还有一个职责需要探讨。

通过给$()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素。例如,新建段落元素如下所示:

  1. $("<p>Hithere!</p>")  
  2.  

但创建无实体的DOM元素(或元素层次结构)不是那么有用。通常,通过这种调用而创建元素层次结构之后,接着利用jQuery的一个DOM操作函数对其进行操作。

请看代码清单1-1的示例。

代码清单1-1即时创建HTML元素

即时创建HTML元素


此代码在文档<body>中建立名为followMe的现有HTML段落元素。在<head>节的脚本块里,建立文档就绪处理程序,利用如下语句把新建的段落元素插入DOM树的现有元素之后:
$("<p>Hithere!</p>").insertAfter("#followMe");

结果如图1-2所示。

动态创建和插入DOM元素


在第2章里将研究整套DOM操作函数,你将看到jQuery提供许多方式去操作DOM,以便获取我们想要的任何结构。既然你已经了解jQuery的基本语法,下面请看该库***大的一个特征。
 

【编辑推荐】

  1. JavaScript DOM特性与应用详解
  2. W3C DOM模型用法详解
  3. JavaScript获取HTML DOM节点元素详解
  4. 深入了解JavaScript HTML DOM对象
  5. 解析HTML DOM Checkbox对象的属性和方法

 

 

责任编辑:佚名 来源: 51cto.com
相关推荐

2010-09-10 13:06:27

JavaScript

2010-09-28 10:33:59

HTML DOM Ch

2021-04-09 18:01:03

前端ReactDOM

2010-09-13 16:46:29

JavaScriptHTML DOM节点

2010-06-07 09:11:43

jQuery

2011-03-04 14:58:40

jqueryJSON

2012-04-23 13:22:35

jQuery插件

2010-06-11 10:55:51

UML部署图

2010-09-09 13:55:47

XML DOM

2010-09-28 10:03:15

DOM文档对象模型

2021-07-07 08:01:48

CSS DOM解析

2014-05-26 16:29:12

Shadow DomWeb Compone

2022-02-24 20:25:36

RxJSJQuery前端开发

2010-09-15 14:40:07

HTMLposition属性

2013-12-02 14:18:33

jQuery对象

2010-03-05 10:25:35

Python元组

2013-12-02 14:29:27

jQuery元素属性

2010-08-30 12:59:47

DIVSPAN

2009-06-23 14:17:00

Dom4j

2010-07-20 16:00:09

Perl模块
点赞
收藏

51CTO技术栈公众号