$("<divstyle=\"border:solid1px#FF0000\">动态创建的 div</div>
").appendTo(testDiv);
3.将元素添加到对象上
我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的 DO
M 结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.
传统上, 使用 window.onload 完成上述目的:
//DOM 加载完毕后添加元素
//传统方法
window.onload=function(){testDiv.innerHTML="<divstyle=\"b
order:solid1px#FF0000\">动态创建的 div</div>";}
虽然能够在 DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行 window.onload函数不仅仅是
在构建完 DOM 树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所
以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就
执行了需要依赖动态添加的元素的脚本而导致脚本错误.
解决办法就是等 DOM 被解析后, 在图像和外部资源加载之前执行我们的函数.在 jQuery 中让这一实现变
得可行:
//jQuery使用动态创建的$(document).ready(function)方法
$(document).ready(
function(){testDiv.innerHTML="<divstyle=\"border:so
lid1px#FF0000\">使用动态创建的$(document).ready(function)方法</
div>";}
);
或者使用简便语法:
//jQuery使用$(function)方法
$(
function(){testDiv.innerHTML+="<divstyle=\"border:s
olid1px#FF0000\">使用$(function)方法</div>";}
);
使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的 window.onlo
ad 则只能调用一个函数.
我的内容管理
展开
