js 和 jquery 动态创建元素

转：http://book.51cto.com/art/201109/294763.htm

1. 错误的编程方法

使用JavaScript动态地创建元素时，有很多程序员通过直接更改某一个容器的HTML内容来进行。

例6-2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head> <title>动态创建对象</title> </head>

<body>

document.getElementById("testDiv").innerHTML =

"<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";

</script>

</body>

</html>

上面的示例中通过修改testDiv的内容，想在页面上动态地添加一个DIV元素。但是请牢记，这是错误的做法！错误的原因如下：

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

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

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

2. 创建新的元素

在jQuery中创建对象非常简单，比如创建一个DIV元素：

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

主要使用jQuery核心类库中的一个方法：

jQuery( html, ownerDocument )

Returns: jQuery

其中，HTML参数是一个HTML字符串，当HTML字符串是没有属性的元素时，内部使用document.createElement创建元素，比如：

//jQuery内部使用document.createElement创建元素:

$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

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

//jQuery内部使用innerHTML创建元素:

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

3. 将元素添加到对象上

可以使用上面两种方式创建一个元素，但是上面已经提到一定不要在页面加载时就改变页面的DOM结构，比如添加一个元素。正确的做法是在页面加载完毕后，添加或删除元素。传统做法上，使用window.onload完成上述目的：

//DOM加载完毕后添加元素

//传统方法

window.onload = function() {

testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">

动态创建的div</div>";

}

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

解决办法就是采用等DOM被解析后，在图像和外部资源加载之前执行的函数。在jQuery中，这一实现变得可行：

//jQuery 使用动态创建的$(document).ready(function)方法

$(document).ready(

function() { testDiv.innerHTML =

"<div style=\"border:solid 1px #FF0000\">使用动

态创建的$(document).ready(function)方法</div>"; }

);

或者使用简便语法:

//jQuery 使用$(function)方法

function() { testDiv.innerHTML +=

"<div style=\"border:solid 1px #FF0000\">

使用$(function)方法</div>"; }

);

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

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