基于jquery的关于动态创建DOM元素的问题


Posted in Javascript onDecember 24, 2010
<script type="text/javascript"> 
document.getElementById("testDiv").innerHTML ="动态创建的div"; 
</script>

而且用的应该是还是乐此不疲,但是有多少人知道这是错误的做法!错误的原因:
(1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也就是说"永远不要在页面加载时改变页面的Dom模型".
(2) 使用修改HTML内容添加元素, 不符合Dom标准. 在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML. 所以也不是完全否定innerHTML函数的使用.所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.
关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子:第一种正确方式:
//使用Dom标准创建元素 
var select = document.createElement("select"); 
select.options[0] = new Option("加载项1", "value1"); 
select.options[1] = new Option("加载项2", "value2"); 
select.size = "2"; 
var object = testDiv.appendChild(select);

通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.
第二种方式: 使用Jquery
当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

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

$("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
否则使用innerHTML方法创建元素:

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

$("动态创建的div").appendTo(testDiv)

Javascript 相关文章推荐
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
jQuery事件用法详解
Oct 06 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 #Javascript
jQuery Clone Bug解决代码
Dec 22 #Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 #Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
jquery里的each使用方法详解
Dec 22 #Javascript
You might like
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python中的类学习笔记
2014/09/23 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python绘制雷达图实例讲解
2021/01/03 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
外企求职信范文分享
2013/12/31 职场文书
中国央视网签名寄语
2014/01/18 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
电台广播稿范文
2015/08/19 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
详解Python牛顿插值法
2021/05/11 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫