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

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

代码如下:

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 正确的做法是:

代码如下:

<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 的返回值。

代码如下:

1.var echkbox=document.createElement("input");   
2.echkbox.setAttribute("type","checkbox");   
3.echkbox.setAttribute("id","inputid");   
4.echkbox.setAttribute("name","inputname");   
5.echkbox.setAttribute("value","inputvalue");   
6.var addhere=document.getElementById("someElementId");   
7.addhere.appendChild(echkbox);   
8.echkbox.setAttribute("checked","checked");   
9.alert(document.getElementById("inputid").checked);

<!--document方法:
getElementById(id)                            返回指定结点的引用
getElementsByTagName(name)       返回文档中所有匹配的元素的集合
createElement(name)                         创建指定类型的新结点
createTextNode(text)                         创建一个纯文本结点
element方法:
getAttribute(id)                                   返回指定属性的值
setAttribute(id,value)                         给属性赋值
removeAttribute(id)                           移除指定属性和它的值
getElementsByTagName(name)       返回结点内所有匹配的元素的集合
node方法:
appendChild(child)                             给指定结点添加一个新的子结点
removeChild(child)                             移除指定结点的子结点
replaceChild(newChild,oldChild)       替换指定结点的子结点
insertBefore(newChild,refChild)       在同一层级的结点前面插入新结点
hasChildNodes()                                 如果结点有子结点则返回true
node属性:
nodeName                                         以字符串的格式存放结点的名称
nodeType                                           以整型数据格式存放结点的类型
nodeValue                                          以可用的格式存放结点的值
parentNode                                        指向结点的父结点的引用
childNodes                                         指向子结点的引用的集合
firstChild                                            指向子结点结合中的第一个子结点的引用
lastChild                                             指向子结点结合中的最后一个子结点的引用

动态加载js

代码如下:

var Rash=true;
var msg="";
function norash()
{
   if (confirm("确定要取消吗"))
   Rash=false;
}
function rashit()
{
    setInterval('getrss()',Inttime);
}
function getrss()
{
if (Rash==true)
{
     head=document.getElementsByTagName('head').item(0);
    script=document.createElement('script');
    script.src='INCLUDE/AutoUpdate.asp';
   script.type='text/javascript';
   script.defer=true;
   void(head.appendChild(script));
   window.status=msg;
   }
}
rashit();

(0)

相关推荐

  • 动态加载js文件 document.createElement

    复制代码 代码如下: var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() {         if (Rash==true)         {         head=document.getElemen

  • IE中document.createElement的iframe无法设置属性name的解决方法

    iframe 的name可以是link或者form的target,将link或form打开到这个iframe上. 之前在IE遇到过设置不了iframe的name属性 JavaScript代码 var iframe = document.createElement('iframe'); iframe.name = 'ifr'; //iframe.setAttribute('name', 'ifr'); //这样也不行 上面两种方式都无法设置.后来找到原来也可以这样创建 JavaScript代码 v

  • IE9+已经不对document.createElement向下兼容的解决方法

    今天发现某网站上,IE9和chrome中页面的功能居然有差异,于是在IE9下打开console,发现一堆js报错,用fiddler跟踪了一下,原来代码里有一句是这样的: if(ie){ var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>'); } 是的,问题就出在这里:DOM Exception: INVALID_CHARACTER_ERR (5) 因为

  • document.createElement()用法

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div>例1: 复制代码 代码如下: <script

  • document.createElement("A")比较不错的属性

    搞了一天,终于把A里面的属性弄出来 代码1: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码2: New Document function newelement(){ var a=document.createElement("a"); a.href="javascript:alert('A link.')"; a.innerHTML="aaa"; var img=new Image(); img.src="http

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

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 复制代码 代码如下: var inputObj    = document.createElement      ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " r

  • iframe 的用法与注意事项

    本文主要来讲述一下 iframe 的用法与注意事项:     好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态. 注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:     document.getElementById("ifr");     window.frames["ifr"]; 要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对

  • JavaScript在IE和FF下的兼容性问题

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 复制代码 代码如下: 一.函数和方法差异:二.样式访问和设置:三.DOM方法及对象引用:四.事件处理:五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().get

  • PHP中header函数的用法及其注意事项详解

    void header ( string $string [, bool $replace = true [, int $http_response_code ]] ) : Send a raw HTTP header 下面有一些使用header的几种用法: 1.使用header函数进行跳转页面: header('Location:'.$url); 其中$url就是将要跳转的url了. 这种用法的注意事项有以下几点: •Location和":"之间不能有空格,否则会出现错误(注释:我刚

  • ie与ff下的event事件使用介绍

    event是ie自带的一个对象,而ff中不存在该对象,只能通过传递参数的方式来模拟event 另外ie中使用srcElement去获得事件触发源,ff下使用target.因此使用这两个对象时需要做相关的浏览器兼容. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

  • 一个快速添加标签的小玩意,但在FF下不能用,望高手指点

    初步判断是obj.style.backgroundColor在FF下返回的是rgb(xxx,xxx,xxx)的缘故.偶是新手,代码很菜,高手勿笑啊 Untitled Document a.blue:link,a.blue:visited{ font-size: 12px; color: #69c; text-decoration: none; } a.blue:hover{ background: #69c; color: #fff; } function fInsert(a,b){ oInpu

  • ie与ff下的event事件

    更多的文章可以参考 http://www.jb51.net/tag/event/1.htm另外ie中使用srcElement去获得事件触发源,ff下使用target.因此使用这两个对象时需要做相关的浏览器兼容. srcElement --http://www.jb51.net/ 点击 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行结果 综合上节attachEvent与addEventListener. 复制代码 代码如下: <script type="text/jav

  • javascript之DIV拖动类 支持在FF下拖动,调用简单

    调用方法 onmousedown="MyMove.Move('InfoKuang',event,1)" 想问的问题是:如何当我拖到一个指定的地方时 层自动吸到指定地方. 相当于拖拽布局 Div Move Temp #InfoKuang { position:absolute; width:130px; height:85px; z-index:1; filter:alpha(Opacity=60,style=0); opacity:0.6; padding: 3px; border:

随机推荐