document.createElement()

本文探讨了使用JavaScript在不同浏览器中创建HTML元素时遇到的兼容性问题,特别是针对input元素的处理方式。文章提供了适用于IE和其他现代浏览器如Firefox、Chrome等的一致解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天处理了一个日期选择器的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                                             指向子结点结合中的最后一个子结点的引用

### 回答1: document.createElement()JavaScript 中用于创建 HTML 元素的方法。它接受一个参数,表示要创建的元素的标签名。 例如,如果要创建一个 <div> 元素,可以使用以下代码: ``` var div = document.createElement('div'); ``` 这将创建一个空的 <div> 元素,并将其分配给变量 div。可以使用其他方法(例如 .appendChild())将元素添加到文档中,或使用 .setAttribute() 方法设置元素的属性。 注意,document.createElement() 只是创建一个元素,它不会将元素添加到文档中。必须使用其他方法将元素添加到文档中,例如 .appendChild()。 ### 回答2: document.createElementJavaScript中的一个方法,它用于在HTML文档中创建新的元素节点。 该方法的语法是:document.createElement(tagName),其中tagName表示要创建的元素的标签名。 当我们调用这个方法时,它会返回一个新的元素节点,可以通过该节点进行进一步的操作,例如设置其属性、添加子元素等。 例如,我们可以通过下面的代码创建一个新的<div>元素节点: var div = document.createElement("div"); 创建新元素后,我们可以通过设置其属性来改变元素的外观和行为。例如,通过设置其id属性、class属性、style属性等,我们可以改变元素的样式以及与其相关的行为。 我们还可以通过appendChild()方法或insertBefore()方法将新创建的元素节点添加到文档中的某个已存在的元素节点之中。例如,可以通过以下代码将新创建的<div>元素添加到文档的<body>元素之中: document.body.appendChild(div); 总之,document.createElement方法是用于在HTML文档中动态创建元素节点的方法,它能够方便地创建新的元素,并且可以通过设置其属性来改变元素的外观和行为。 ### 回答3: document.createElementJavaScript中的一个DOM方法,用于在文档中动态创建一个新的元素节点。该方法接收一个参数,表示要创建的元素的标签名称。 例如,如果我们想要创建一个新的div元素,可以使用以下代码: ``` var newDiv = document.createElement('div'); ``` 这样就在文档中创建了一个新的div元素节点,并将其赋值给变量newDiv。现在,我们可以使用这个变量来操作和修改这个新创建的元素。 创建的新元素节点并没有直接添加到文档中,它只是在内存中创建而已。如果我们想要将这个新的元素节点添加到文档中的某个位置,可以使用其他DOM方法,比如appendChild()。 例如,如果我们想要将上面创建的新div元素添加到body元素中,可以使用以下代码: ``` document.body.appendChild(newDiv); ``` 这样就将新的div元素添加到了body元素中。 总结起来,document.createElement方法是JavaScript中用于创建一个新的元素节点的方法。我们可以通过该方法创建新的元素并对其进行操作和修改,然后再将其添加到文档中的某个位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值