有关innerHTML应该了解和注意的事（有些元素有innerHTML属性，但在IE中是只读的）

最新推荐文章于 2021-06-27 05:06:09 发布

冷月宫主

最新推荐文章于 2021-06-27 05:06:09 发布

阅读量1.4k

点赞数 1

分类专栏： ajax 文章标签： ie jquery table function html div

ajax 专栏收录该内容

213 篇文章 0 订阅

订阅专栏

http://jinyc.info/archives/78

IE下部分元素（基本上都是与Table类相关）的innerHTML属性是只读，在使用Table时，不能直接使用innerHTML将tbody、tr、td直接添加到对应的元素下，如将td通过tr.innerHTML添加到tr下，这样子是不行的！

最近在研究制作一个JS视图对象，在测试时发现，当我将构建好的具有HTML结构的字符串添加到某个节点，使用 node.innerHTML=str进行，如果node是tbody时，IE下会报“运行时错误”，而FF、Chrome、Opera不会，运行正常。后来通过搜索、查看资料，找到了问题的所在：MSDN上有一篇文章里说了这么一句话：

The property(就是innerHTML) is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

文章地址：http://msdn.microsoft.com/en-us /library/ms533897(VS.85).aspx

难怪，我直接给tbody的innerHTML赋值会报错，因为只读，不能写。同时，MDC上关于innerHTML的一篇文章里说了：

It should never be used to write parts of a table—W3C DOM methods should be used for that—though it can be used to write an entire table or the contents of a cell.

文章地址：https://developer.mozilla.org/en/DOM/element.innerHTML

就是说最好采用标准的方式进行Table的相关操作，添加行，添加单元格都采用标准的API进行，不要使用innerHTML就了事，虽然在浏览器（除了IE）里是可行的。

使用过jQuery的童鞋们会发现，它的html()能够很好的满足我们的要求，它是怎么做的？于是开始研究jQuery的html()的实现是如何。请看：

[1]、对传进来的参数进行必要的判断，是否允许直接使用innerHTML。具体看jQuery源码html:Function()

[2]、如果是table之类的元素，则采用以下方式进行（具体看jQuery源码append:Function()、domManip:Function()，还有buildFragment:Function()）：

创建一个div：document.createElement(“div”);
创建一个文档碎片fragment：document.createDocumentFragment();
对参数进行“String转化为DOM”操作：
如果我们传进去的是“<tr><td>1</td>< /tr>”，会被处理成“<table><tbody><tr><td>1< /td></tr></tbody></table>”。然后，将处理结果赋值给创建的div的 innerHTML，即 div.innerHTML=”<table><tbody><tr><td>1< /td></tr></tbody></table>“，此时，转化已经完成了。同时，我们也知道了节点的深度（这里是2），即我们传入的“<tr><td>1</td></tr>”在转换后的DOM里的正确位置？！（这个不好解释^_^）。看jQuery源码clean:Function()部分。
最后，我们在div（刚才创建的那个）里定位到正确的位置，然后获取元素。因为转换过来的是 “<table><tbody><tr><td>1</td>< /tr></tbody></table>”，根据深度2（tr在table所处的层级），取到 “<tr><td>1</td></tr>”，注意，此时的这个不是一个字符串了，而是一个DOM对象！取出之后将其append到创建好的文档碎片 fragment里，最后再将fragment整个append到要去的节点上，于是完成了操作！

[3]、如果允许直接使用innerHTML，就直接使用了，呵呵！

除了jQuery精彩的表现让我感叹之外，也让我深深意识到，基础知识的重要性和标准的重要性。再次膜拜各位大牛，也深深的拷问自己，何时能够完成超越！

补充：如果一个节点的文本节点的值含有“&”、“<”、“>”，使用alert打印该节点的innerHTML，你会发现，浏览器会对这些符号进行转义！如“ <div>这里有 & < ></div> ”，打印div的innerHTML是：“这里是 &amps; < >”，呵呵！