ccc\r
\r
document.getElementById('abc').innerHTML = '
abc'; // \公众未知的运行时缺点\"大众 \r\r出错缘故原由便是IE8针对包括table在内的部分元素,其innerHTML是只读的,不能被设置。测试创造,这些元素包括:col, colGroup,frameSet, html, head, style, table, tBody, tFoot, tHead, title和tr等。类似的问题还有,select元素在IE8以下的浏览器设置innerHTML无效:
\rvar el = document.getElementsByTagName('select')[0],
\rinner = '';
\rel.innerHTML = inner; // 无报错,但无效
\r办理方案有多种:
\rvar el = document.getElementsByTagName('select')[0];
\r// 方案一
\rel.add(new Option('text', \公众value\"大众));
\r// 方案二
\rvar op = document.createElement('option');
\rop.innerText = 'text';
\rop.value = 'value';
\rel.appendChild(op);
\r最诡异的一次是,在IE8以下:
\rvar el = document.getElementsByTagName('div')[0];
\rel.innerHTML = '
some text'; // \"大众未知的运行时缺点\"大众 \r
el.innerHTML = '
some textsome str'; // \公众未知的运行时缺点\"大众 \r
el.innerHTML = '
some str
some text'; // 正常\r
关于表达式
\rhtml字符串中,p标签包含pre标签,并且和p的开始标签和pre的开始标签之间没有任何字符串,都会报“未知的运行时缺点”。
\rIE8以下的浏览器在处理html构造上比较严格,为此给我们利用innerHTML的时候带来了很多不便。对付一些不适宜利用innerHTML的元素,办理方案上,就必须用创建DOM元素(如createElement)和添加DOM元素的方法来设置DOM树的内容。像这样的兼容性还有待创造,总的觉得,特殊是IE8以下的浏览器,在利用innerHTML的时候,要特殊考虑兼容性测试。
\r内存泄露
\r导致IE的内存泄露缘故原由,常听到的有“闭包导致内存泄露”或者“没有解除事宜导致内存泄露”,还有常见的“循环引用”等。innerHTML的办法设置DOM元素的内容,以移除DOM元素下的子元素。也会产生“没有解除事宜导致内存泄露”和“循环引用”的问题。如:
\rvar el = document.createElment('div');
\rel.onclick = function () {
\r//循环引用el
\rel.style.color = '#000';
\r};
\rdocument.body.appendChild(el);
\r//重置el所在的容器的内容,移除el
\rdocument.body.innerHTML = '';
\r如果循环实行以上代码,就会创造由于el的循环引用,el所占用的内存没有被开释。还有其余一种情形也会导致内存透露。
\rvar el = document.createElement('div');
\rel.innerHTML = 'Test Link';
\rdocument.body.appendChild(el);
\r循环运行以上的代码,会创造内存节节上升。如果把a标签的onclick去掉,内存利用就稳定。可见以上代码也会造成内存泄露。这种征象产生的条件是:1、内存中有一个伶仃的元素(el),未添加到DOM树中;2、该元素的innerHTML中有标签是绑定事宜的;3、该元素末了被添加到DOM树中。
\r安全性
\r如前面所说的innerHTML可以插入精确的html语法的html字符串,当然也包括script标签。只须要在script标签上加上defer属性,并且以一段非包含其他标签的html代码插入到DOM中,script中的js就会被实行。
\rvar tagHtml = '
some text
',\rscriptHtml='';
\rdocument.body.innerHTML = tagHtml + scriptHtml; // \"大众Hello\"大众
\r由于可以通过以上办法插入并实行脚本,对付把非信赖来源的html字符串用innerHTML插入,存在安全性问题,随意马虎受到脚本攻击。
\r小结
\r以上悉数了innerHTML的各种是非。总的来说,用innerHTML来追加移除DOM元素还是很方便的,但在利用innerHTML方法的时候,要多些把稳一下兼容性、性能影响和安全性。