基于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变量作用域及可访问性的探讨
Nov 23 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
在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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
浅析Python中的for 循环
2016/06/09 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
在vscode中配置python环境过程解析
2019/09/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
手机银行营销方案
2014/03/14 职场文书
元旦晚会主持词
2014/03/24 职场文书
应届生自荐信
2014/06/30 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js