全部博文（2065）
分类： 系统运维
2009-11-06 11:41:50
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>动态创建对象title>
head>
<body>
<div id="testDiv">测试图层div>
<script type="text/javascript">
document.getElementById("testDiv").innerHTML = "动态创建的div";
script>
body>
html>
这种做法是错误的。在页面加载的时候 修改了DOM页面结构了！
这样的话不同的浏览器会出现错误的！
在jQuery中创建对象更加简单, 比如创建一个Div元素:
$("动态创建的div")
就这样就能够创建一个HTML元素了非常方便！
//jQuery内部使用document.createElement创建元素:
$("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
(创建一个HTML标签然后赋上CSS然后通过添加HTML即HTML内容了然后再追加上来！)
否则使用innerHTML方法创建元素:
//jQuery内部使用innerHTML创建元素:
$("动态创建的div").appendTo(testDiv);
也可以直接写一个完整的HTML标签的！
其中的html表示的HTML内容的值。
我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构,
比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.
虽然能够在DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload函数
不仅仅是在构建完DOM树之后,
也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者
其他资源加载很长时间,
访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本
而导致脚本错误.
解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让
这一实现变得可行:
//jQuery 使用动态创建的$(document).ready(function)方法 $(document).ready( function() { testDiv.innerHTML = "window.onload = function() { testDiv.innerHTML = "JQuery能够判断在DOM加载完 触发一个事件！动态创建的div"; }
onload事件 ：整个的全部内容都加载完了才执行如果此时有问题就会中止了！
//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "使用$(function)方法"; }
);