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();