动态创建元素

最新推荐文章于 2022-11-20 15:21:11 发布

ghycn

最新推荐文章于 2022-11-20 15:21:11 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： html jquery javascript function 浏览器文档

本文链接：https://blog.csdn.net/ghycn/article/details/5856673

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、错误的编程方法

我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的HTML内容.比如:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3     <head>
4         <title>动态创建对象</title>
5     </head>
6     <body>
7         <div id="testDiv">测试图层</div>
8     <script type="text/javascript">
9         document.getElementById("testDiv").innerHTML = "<div style=/"border:solid 1px #FF0000/">动态创建的div</div>";
10     </script>
11     </body>
12 </html>

上面的示例中通过修改testDiv的内容,在页面上动态的添加了一个div元素. 但是请牢记,这是错误的做法!

错误的原因:

(1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也就是说"永远不要在页面加载时改变页面的Dom模型".

(2) 使用修改HTML内容添加元素, 不符合Dom标准. 在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML. 所以也不是完全否定innerHTML函数的使用.

所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.

二、创建新的元素

下面介绍两种正确的创建元素的方式.

1.使用HTML DOM创建元素

什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。

关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子:

1 //使用Dom标准创建元素
2 var select = document.createElement("select");
3 select.options[0] = new Option("加载项1", "value1");
4 select.options[1] = new Option("加载项2", "value2");
5 select.size = "2";
6 var object = testDiv.appendChild(select);

通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.

2.使用jQuery函数创建元素

在jQuery中创建对象更加简单, 比如创建一个Div元素:

1 $("<div style=/"border:solid 1px #FF0000/">动态创建的div</div>")

我们主要使用jQuery核心类库中的一个方法:

1 jQuery( html, ownerDocument )
2 Returns: jQuery

根据HTML原始字符串动态创建Dom元素.

其中html参数是一个HTML字符串, 在jQuery1.3.2中对此函数做了改进:
当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

1 //jQuery内部使用document.createElement创建元素:
2 $("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

否则使用innerHTML方法创建元素:

1 //jQuery内部使用innerHTML创建元素:
2 $("<div style=/"border:solid 1px #FF0000/">动态创建的div</div>").appendTo(testDiv);

三、将元素添加到对象上

我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.

传统上, 使用window.onload完成上述目的:

1 //DOM加载完毕后添加元素
2 //传统方法
3 window.onload = function() { testDiv.innerHTML = "<div style=/"border:solid 1px #FF0000/">动态创建的div</div>"; }

虽然能够在DOM完整加载后, 再添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:

1 //jQuery 使用动态创建的$(document).ready(function)方法
2 $(document).ready(
3 function() { testDiv.innerHTML = "<div style=/"border:solid 1px #FF0000/">使用动态创建的$(document).ready(function)方法</div>"; }
4 );

或者使用简便语法:

1 //jQuery 使用$(function)方法
2 $(
3 function() { testDiv.innerHTML += "<div style=/"border:solid 1px #FF0000/">使用$(function)方法</div>"; }
4 );

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.

ghycn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<title>动态创建对象</title>
5	</head>
6	<body>
7	<div id="testDiv">测试图层</div>
8	<script type="text/javascript">
9	document.getElementById("testDiv").innerHTML = "<div style=/"border:solid 1px #FF0000/">动态创建的div</div>";
10	</script>
11	</body>
12	</html>

1	//使用Dom标准创建元素
2	var select = document.createElement("select");
3	select.options[0] = new Option("加载项1", "value1");
4	select.options[1] = new Option("加载项2", "value2");
5	select.size = "2";
6	var object = testDiv.appendChild(select);

1	//jQuery内部使用document.createElement创建元素:
2	$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

1	//jQuery内部使用innerHTML创建元素:
2	$("<div style=/"border:solid 1px #FF0000/">动态创建的div</div>").appendTo(testDiv);

1	//DOM加载完毕后添加元素
2	//传统方法
3	window.onload = function() { testDiv.innerHTML = "<div style=/"border:solid 1px #FF0000/">动态创建的div</div>"; }

1	//jQuery 使用动态创建的$(document).ready(function)方法
2	$(document).ready(
3	function() { testDiv.innerHTML = "<div style=/"border:solid 1px #FF0000/">使用动态创建的$(document).ready(function)方法</div>"; }
4	);

1	//jQuery 使用$(function)方法
2	$(
3	function() { testDiv.innerHTML += "<div style=/"border:solid 1px #FF0000/">使用$(function)方法</div>"; }
4	);