基于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 相关文章推荐
js函数在frame中的相互调用详解
Mar 03 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python代码注释规范代码实例解析
2020/08/14 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
大学生暑期实践感言
2014/02/26 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2015年教学工作总结
2015/04/02 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers