没有合适的资源?快使用搜索试试~ 我知道了~
javascript动态生成页面元素
4星 · 超过85%的资源 需积分: 32 11 下载量 18 浏览量
2012-05-22
20:00:27
上传
评论 1
收藏 3KB TXT 举报
温馨提示
试读
3页
javascript动态生成页面元素
资源推荐
资源详情
资源评论
最近,由于项目需要,需要在web页面的客户端动态生成表单元素。要求同时支持IE和firefox,而我之前从来没有接触过类似的任务,一切都是从零开始。现在已经完成了需求,特将实践过程中积累的经验在此分享一下。
对于动态HTML编程,IE实现了两套模型:一套是以操作innerHTML为主的狭义的DHTML,一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTML都默认指的对于innerHTML进行操作的编程方式,不是广义的DHTML。) 直接操作html代码片断,主要靠Web程序员使用字符串拼接来生成页面元素,这是一种高效的动态页面操作方式,不过似乎少些编程逻辑的味道,代码中往往散布着大量不完整的html代码片断。而DOM方式进行动态页面编程,在逻辑上是一种对集合和元素对象的操作,编程逻辑比较清晰,不过效率上有一些差别。具体使用什么方式来实现动态Web页面,大多数情况下是个人的喜好问题。
先简单介绍一下我的客户需求:
动态生成的界面元素是一个表格,点击按钮增加一行,该行中包含一个按钮,点击后再删除该行。该表格的内容包含一个表单中,当提交表单的时候,后台程序将获得表格中的相应内容。
最开始我的实现思路是利用innerHTML,父对象我选择的是一个固定的table,这种方法在firefox 1.5.x中实践通过,但是在IE中,出现异常。
我用try...catch获得的异常消息是:“未知的运行时错误”,跟没说一样,逼视一下IE!
于是我在程序中另辟途径,先判断当前浏览器的类型,如果是firefox,则继续使用innerHTML的方法,否则用DOM树生成的方法。
注意,判断浏览器类型最好不要用navigator.appName来判断,我采用的是
if(document.all && document.getElementById)
{
//do IE
}
else
{
//do firefox
}
使用DOM,最常用的方法就是document.createElement(sTag),sTag是一个合法的html标签名字(tagName)。我们创建好一个html元素对象后,对它的属性进行赋值,
然后insertBefore或appendChild到页面的DOM对象树中。这里msdn提醒了几个注意事项:
1、不能通过编程方式动态创建frame和iframe元素(IE 5.0及以下);
2、input元素被创建后默认的类型是input type='text';
3、需要使用其他类型的input元素,需要在把input对象放入DOM对象树之前给input.type赋予你希望的类型,否则在input insert或append进入DOM对象树后不能再修改;
4、button元素被创建后默认的类型是普通按钮,要使用其它类型按钮,需要遵循和问题3相同的注意事项;
5、不能为通过向元素对象赋值得方式,为元素对象添加NAME属性(这个在"细说HTML元素的ID和NAME属性详解"一文里也是提过的)。
6、sTag其实不只限于html标签名,任何合法的html元素语句都可以。
下面说一下我遇到的问题,当我在使用DOM方式进行动态页面创建的时候,发现不能使用普通的DOM方式为input type='checkbox'和input type='radio'赋初值。即下面的语句:
var input = document.createElement('INPUT');
input.type = 'checkbox';
对于动态HTML编程,IE实现了两套模型:一套是以操作innerHTML为主的狭义的DHTML,一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTML都默认指的对于innerHTML进行操作的编程方式,不是广义的DHTML。) 直接操作html代码片断,主要靠Web程序员使用字符串拼接来生成页面元素,这是一种高效的动态页面操作方式,不过似乎少些编程逻辑的味道,代码中往往散布着大量不完整的html代码片断。而DOM方式进行动态页面编程,在逻辑上是一种对集合和元素对象的操作,编程逻辑比较清晰,不过效率上有一些差别。具体使用什么方式来实现动态Web页面,大多数情况下是个人的喜好问题。
先简单介绍一下我的客户需求:
动态生成的界面元素是一个表格,点击按钮增加一行,该行中包含一个按钮,点击后再删除该行。该表格的内容包含一个表单中,当提交表单的时候,后台程序将获得表格中的相应内容。
最开始我的实现思路是利用innerHTML,父对象我选择的是一个固定的table,这种方法在firefox 1.5.x中实践通过,但是在IE中,出现异常。
我用try...catch获得的异常消息是:“未知的运行时错误”,跟没说一样,逼视一下IE!
于是我在程序中另辟途径,先判断当前浏览器的类型,如果是firefox,则继续使用innerHTML的方法,否则用DOM树生成的方法。
注意,判断浏览器类型最好不要用navigator.appName来判断,我采用的是
if(document.all && document.getElementById)
{
//do IE
}
else
{
//do firefox
}
使用DOM,最常用的方法就是document.createElement(sTag),sTag是一个合法的html标签名字(tagName)。我们创建好一个html元素对象后,对它的属性进行赋值,
然后insertBefore或appendChild到页面的DOM对象树中。这里msdn提醒了几个注意事项:
1、不能通过编程方式动态创建frame和iframe元素(IE 5.0及以下);
2、input元素被创建后默认的类型是input type='text';
3、需要使用其他类型的input元素,需要在把input对象放入DOM对象树之前给input.type赋予你希望的类型,否则在input insert或append进入DOM对象树后不能再修改;
4、button元素被创建后默认的类型是普通按钮,要使用其它类型按钮,需要遵循和问题3相同的注意事项;
5、不能为通过向元素对象赋值得方式,为元素对象添加NAME属性(这个在"细说HTML元素的ID和NAME属性详解"一文里也是提过的)。
6、sTag其实不只限于html标签名,任何合法的html元素语句都可以。
下面说一下我遇到的问题,当我在使用DOM方式进行动态页面创建的时候,发现不能使用普通的DOM方式为input type='checkbox'和input type='radio'赋初值。即下面的语句:
var input = document.createElement('INPUT');
input.type = 'checkbox';
资源评论
- linus1062012-12-24不错,可以用的
shz1102
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
- 基于C++实现的风力发电气动平衡监测系统+源代码+测量数据(高分课程设计)
- 毕业设计- 基于STM32F103C8T6 单片机,物联网技术的太阳能发电装置+源代码+文档说明+架构图+界面截图
- 基于 LSTM(长短期记忆)(即改进的循环神经网络)预测风力发电厂中风力涡轮机产生的功率+源代码+文档说明
- 基于stm32f103+空心杯电机+oled按键+运动算法
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功