为什么在设置innerHTML时IE出现意外错误
我试图在firefox中的一个元素上设置innerHTML,并且效果很好,在IE中尝试了它,并且出现了意外错误,没有明显的原因。
例如,如果我们尝试将表的innerHTML设置为" hi from stu",则它将失败,因为表后必须跟随序列。
解决方案
我刚刚发现,如果我们尝试在IE中在逻辑上不正确的元素上设置innerHTML,则会抛出此错误。
例如,如果我们尝试将表的innerHTML设置为" hi from stu",则它将失败,因为该表必须后面跟随一个序列。
显然,Firefox不是那么挑剔。
希望能帮助到你。
"显然,firefox并不是很挑剔" ==>显然,FireFox是如此多虫,以至于它没有记录到这种明显的违反基本html嵌套规则的行为...
正如某人在另一个论坛上指出的那样,FireFox会接受我们将整个html文档添加为表单域或者图像的子元素,-(
我们是否尝试设置innerText和/或者textContent?当我们尝试在IE中更改其innerHTML时,某些节点(如SCRIPT标记)将无法按预期运行。这里有更多关于innerText和textContent的信息:
http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/
不知道我们为什么对Stu这个问题感到沮丧,因为这是我最近才解决的问题。诀窍是将HTML"喷射"到当前未添加到文档树的DOM元素中。这是执行此操作的代码段:
// removing the scripts to avoid any 'Permission Denied' errors in IE var cleaned = html.replace(/<script(.|\s)*?\/script>/g, ""); // IE is stricter on malformed HTML injecting direct into DOM. By injecting into // an element that's not yet part of DOM it's more lenient and will clean it up. if (jQuery.browser.msie) { var tempElement = document.createElement("DIV"); tempElement.innerHTML = cleaned; cleaned = tempElement.innerHTML; tempElement = null; } // now 'cleaned' is ready to use...
请注意,在此代码段中,我们仅使用jQuery来测试浏览器是否为IE,对jQuery没有硬性依赖。
我们是在设置完全不同的innerHTML还是替换innerHTML中的模式?我问是因为,如果我们尝试通过innerHTML的"功能"进行简单的搜索/替换,则会发现某些类型的元素无法在IE中播放。
可以通过以下方式来谨慎地纠正这一问题:将尝试放在尝试/捕获中,然后通过parentNode使DOM冒泡,直到成功完成此操作为止。
但是,如果我们要插入全新的内容,这将不合适。
检查我们要设置innerHTML的元素的范围。因为FF和IE以不同的方式处理此问题
我们正在看到这种行为,因为innerHTML对于IE中的表元素是只读的。从MSDN的innerHTML属性文档中:
The property 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.
http://www.ericvasilik.com/2006/07/code-karma.html
我一直在与用不同的链接列表替换表中的链接列表的问题作斗争。如上所述,问题出在IE及其表元素的readonly属性上。
为我添加选项不是一个选择,所以我(最终)解决了此问题(适用于Ch,FF和IE 8.0(尚可以尝试其他方法,但我很希望))。
replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>"); function replaceInReadOnly(element, content){ var newNode = document.createElement(); newNode.innerHTML = content; var oldNode = element.firstChild; var output = element.replaceChild(newNode, oldNode); }
为我工作,我希望它为我们工作