`
fastwind
  • 浏览: 323749 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

document.createElement()用法及注意事项

阅读更多

var inputObj = document.createElement
  ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");
 


但是这样的情况在ff下是不兼容的。
还有就是特别注意input元素的创建:与 input 有关的元素有很多,比如:checkbox、radio、submit、reset...,因此创建 input 是个很特殊的用法。 
创建不同的 input 正确的做法是:

今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素

<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "radio"; //紧接着上一行写
var obj = board.appendChild(e);
obj.checked = true;
//如下写法也是正确的:
//e.checked = true;
-->
</script>
 

针对 input,在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前,也可以在其之后。但在 IE 中 type 属性必须在前,其它属性必须在后。

IE 创建元素,还有一个特点,就是可以连同属性一同创建,比如:var e = document.createElement("<input type='radio' name='r' value='1' />"); 这在其它浏览器中是不行的,所以我们也不支持。

总结:

针对非 input 元素,各浏览器中,既可以把对元素属性的改变写在显示元素(insertBefore 或 appendChild)之前,也可以在其后。 
针对 input 元素,为了兼容 IE,type 属性写在显示元素(insertBefore 或 appendChild)之前,其它属性写在其后。
推荐:

除了 input 元素的 type 属性写在显示元素(insertBefore 或 appendChild)之前外,其它属性都写在显示元素之后。 
改变属性时,对写在显示元素(insertBefore 或 appendChild)之前的用 createElement 的返回值,对写在显示元素之后的用 insertBefore 或 appendChild 的返回值。

分享到:
评论

相关推荐

    document.createElement()用法及注意事项(ff下不兼容)

    `document.createElement()` 是JavaScript中的一个核心方法,用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用,因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而,...

    document.frames在非IE浏览器中的解决办法

    - **注意事项**: - 在使用`window.frames`时,需要确保iframe具有正确的`name`属性。 - 如果一个页面中包含多个iframe,可以通过索引访问特定的iframe,例如`window.frames[0]`表示第一个iframe。 #### 示例代码...

    Javascript+DOM+总结

    - **注意事项**: - 如果复制含有 `id` 属性的元素,记得更改复制后的元素的 `id`,以避免重复 `id` 的问题。 #### 插入节点 ##### `appendChild()` - **语法**:`parent.appendChild(newNode);` - **功能**:将...

    Document和Document.all区别分析

    3. **引用元素的注意事项**: - 如果HTML元素是`form`的子元素,比如`input`,应使用`formName.inputName`来引用,而不是直接用`inputName`或`document.inputName`。 - 没有`name`属性的元素无法通过`Document.all...

    js 创建div层

    ### 四、注意事项 - 在创建和操作DOM元素时,应考虑浏览器兼容性问题,尤其是在处理透明度、滤镜等CSS属性时。 - 动态创建的div层可能会改变页面的布局和性能,合理规划元素数量和位置,避免过度渲染导致的性能瓶颈...

    table添加行 js

    7. **优化与注意事项** - 考虑使用模板字符串或者`innerText`代替`innerHTML`,以避免XSS攻击。 - 避免DOM操作过于频繁,可以一次性创建多个元素后批量添加,以提高性能。 - 如果表格结构复杂,可能需要处理表头...

    javascript动态向网页中添加表格实现代码.docx

    #### 五、注意事项 - 本示例在IE9、Firefox、Chrome和Safari等浏览器中进行了测试,表现良好。 - 在实际应用中可能还需要考虑更多的兼容性问题,例如对于老旧版本的浏览器的支持。 - 另外,还可以进一步优化代码,如...

    JS实现的年月日三级联动下拉框日期选择效果源码.zip

    在JavaScript编程中,实现年月日三级联动下拉框日期选择效果是一项常见的需求...此外,压缩包中的`使用须知.txt`文件可能包含了关于如何在项目中正确使用此源码的指导和注意事项,建议参考该文件以确保顺利集成和运行。

    JS检测特定字体是否已安装在用户设备上

    四、注意事项 1. 这种检测方法可能受到浏览器兼容性的影响,`@font-face`和`document.fonts`接口并非所有浏览器都支持。 2. 测量宽度的方法可能会受到浏览器渲染机制和硬件性能的影响,可能存在一定的误差。 3. 对于...

    JS_Document

    **JS_Document** ...附带的`js.chm`文件可能是一个帮助文档,包含了更详细关于JavaScript DOM操作的信息,包括实例、方法解释和可能的注意事项。对于深入学习JavaScript DOM编程,查阅此类资源是非常有益的。

    js动态添加删除表格

    4. **实际应用中的注意事项** - 为了避免内存泄漏,记得移除不再使用的事件监听器。 - 当表格数据量较大时,频繁的动态操作可能影响性能,这时可以考虑使用虚拟滚动或分页技术。 5. **源码与工具** 博文提供的`...

    通过JavaScript+IFRAME实现页面分屏加载

    注意事项 - **跨域限制**:IFRAME加载的内容必须与包含它的页面在同一域名下,否则会受到浏览器的同源策略限制。 - **性能优化**:虽然分屏加载能提升用户体验,但过多的IFRAME可能导致内存占用增加,影响性能。...

    JavaScript 实现HTML DOM增删改查操作的常见方法详解

    以下将详细介绍这些操作的具体实现方法和注意事项。 首先,查找DOM是进行其他操作的基础,有三种常用的方式: 1. 通过ID查找:这是最常见的一种方法。每个DOM元素都可以有一个唯一的ID,使用document....

    VC.XML.document.node.create.rar_VC XML CREATE_XML文档_vc xml _vc x

    本篇文章将深入探讨如何在VC++(Visual C++)环境下创建XML文档节点,以及与之相关的编程技巧和注意事项。 首先,我们需要理解XML的基本结构。XML文档由一系列的元素(Element)组成,每个元素可以包含其他元素、...

    【JavaScript源代码】JavaScript 如何在浏览器中使用摄像头.docx

    ### JavaScript在浏览器中使用摄像头的方法 #### 一、获取摄像头权限 在开发Web应用程序时,如果需要使用到用户的摄像头或麦克风,首先需要通过`navigator.mediaDevices.getUserMedia()`方法请求相应的权限。为了...

    开发跨浏览器javascript常见注意事项

    以下是一些常见的注意事项,有助于优化JavaScript在不同浏览器之间的兼容性。 一、向表追加行 在JavaScript中向HTML表格添加行时,通常会使用`document.createElement`和`document.appendChild`方法。然而,IE浏览...

    JS document文档的简单操作完整示例

    8. 文档操作注意事项 在操作HTML文档时,需要注意,通过innerHTML进行的节点添加或修改可能会导致绑定在元素上的事件丢失。同时,页面的动态内容更新需要注意保持用户操作的持久性,避免由于页面刷新导致用户操作...

    JavaScript跨域总结与解决办法

    - **注意事项**: - 只能在主域相同的情况下使用此方法。 - 设置`document.domain`只能设置为主域名。 - 存在一定的安全隐患,因为一旦一个站点被攻破,其他设置了相同`document.domain`的站点也会受到影响。 2...

    IOS React等Title不显示问题解决办法

    **注意事项** 虽然这种方法可以有效解决标题更新的问题,但可能会造成页面短暂的闪烁现象,因为即使iframe设置了`display: none`,在加载过程中仍然可能出现。为避免闪烁,可以尝试以下策略: 1. 使用透明图片或者...

Global site tag (gtag.js) - Google Analytics