js中createElement方法的兼容性
2017-03-22 本文已影响0人
web蜗牛
W3C DOM Level2 Core规定,Document 接口下的 createElement 方法可以创建一个元素节点对象实例。它可以传入一个字符串参数 tagName,在 HTML 中,这个参数可以是任何形式,但tagName 应为一个合法的标签名。
例如:document.createElement("td");//创建一个td
若 tagName 中出现不合法的字符,则应抛出 INVALID_CHARACTER_ERR 异常。
由于微软的强大,其产品IE使用了一些规范以外的规则,其中之一就与createElement方法有关。即:在 IE 中,createElement 方法不仅可以通过合法的标签名创建节点对象,还可以通过传入一段合法的 HTML 代码字符串作为参数创建节点对象。
例如:document.createElement("<input type='text' name='txtName'>");//创建一个name属性为"txtName"的input
若使用了 IE 特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数创建节点对象的方法,则在其他浏览器中将会抛出异常,并导致后续代码无法执行。这就造成了浏览器的兼容性问题。
也许有的读者会说,用 createElement 方法时,使用传入标签名的做法不就解决了兼容性问题吗?
例如:
var txt = document.createElement("input");
txt.type = "text";
txt.name = "txtName";
......
但在 IE6 , IE7 中,如果动态生成 input 元素,是无法为其设置 name 属性的,这是IE自身的问题。这个时候,IE 特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数创建节点对象的方法,就有了大显身手的机会。不过,IE 中无法为 input 设置 name 属性的 bug 已经在 IE8 中被修复。在其他浏览器中,不存在上述问题。
所以,要最终解决 createElement 方法的兼容性问题,还是要注意判断浏览器,针对 IE 可以使用其特有的通过为createElement 传入一段合法的 HTML 代码字符串作为参数的方法,非 IE 浏览器仍然使用 W3C 规范的标准方法。
例如:
if($.browser.msie) {
var txt = document.createElement("<input type='text' name='txtName'>")
} else {
var txt = document.createElement("input");
txt.type = "text";
txt.name = "txtName";
}