javascript中innerHTML的是与非.docx

分享：innerHTML的是与非在前端开发中，为了更好的操纵数据与页面展示，于是有了把技术分离出来，再根据数据和模板去渲染页面的做法。最终js生成的html（html字符串、DOM元素或DOM片段）都要追加到DOM树上或者从DOM树上移除一些元素，而这些是靠innerHTML、appendChild、removeChild等实现。innerHTML关于innerHTML的具体用法就不啰嗦了，如有兴趣可以参考MDN的介绍。相比createElement和appendChild的方式，使用innerHTML的好处也很简单，就是它用起来足够简单。兼容性在长期使用innerHTML的过程中发现了很多兼容性问题。比如IE8以下，运行以下代码：var el = document.getElementsByTagName(p)0;el.innerHTML = test; / 正常el.innerHTML = test; / 未知的运行时错误可以发现，一个p元素的innerHTML只能包含文本和内联元素。再看一个例子，同样在IE8以下： ccc document.getElementById(abc).innerHTML = abc; / 未知的运行时错误 出错原因就是IE8针对包括table在内的部分元素，其innerHTML是只读的，不能被设置。测试发现，这些元素包括：col,colGroup,frameSet,html,head,style,table,tBody,tFoot,tHead,title和tr等。类似的问题还有，select元素在IE8以下的浏览器设置innerHTML无效：var el = document.getElementsByTagName(select)0, inner = 20112012; el.innerHTML = inner; / 无报错，但无效解决方案有多种：var el = document.getElementsByTagName(select)0;/ 方案一 el.add(new Option(text, value);/ 方案二var op = document.createElement(option);op.innerText = text;op.value = value;el.appendChild(op);最诡异的一次是，在IE8以下：var el = document.getElementsByTagName(div)0;el.innerHTML = some text; / 未知的运行时错误 el.innerHTML = some textsome str; / 未知的运行时错误 el.innerHTML = some strsome text; / 正常关于表达式html字符串中，p标签包含pre标签，并且和p的开始标签和pre的开始标签之间没有任何字符串，都会报“未知的运行时错误”。IE8以下的浏览器在处理html结构上比较严格，为此给我们使用innerHTML的时候带来了很多不便。对于一些不适合使用innerHTML的元素，解决方案上，就必须用创建DOM元素（如createElement）和添加DOM元素的方法来设置DOM树的内容。像这样的兼容性还有待发现，总的感觉，特别是IE8以下的浏览器，在使用innerHTML的时候，要特别考虑兼容性测试。内存泄漏导致IE的内存泄漏原因，常听到的有“闭包导致内存泄漏”或者“没有解除事件导致内存泄漏”，还有常见的“循环引用”等。innerHTML的方式设置DOM元素的内容，以移除DOM元素下的子元素。也会产生“没有解除事件导致内存泄漏”和“循环引用”的问题。如：var el = document.createElment(div);el.onclick = function () /循环引用el el.style.color = #000;document.body.appendChild(el);/重置el所在的容器的内容，移除eldocument.body.innerHTML = ;如果循环执行以上代码，就会发现因为el的循环引用，el所占用的内存没有被释放。还有另外一种情况也会导致内存泄露。var el = document.createElement(div);el.innerHTML = Test Link;document.body.appendChild(el);循环运行以上的代码，会发现内存节节上升。如果把a标签的onclick去掉，内存使用就稳定。可见以上代码也会造成内存泄漏。这种现象产生的条件是：1、内存中有一个孤立的元素（el），未添加到DOM树中；2、该元素的innerHTML中有标签是绑定事件的；3、该元素最后被添加到DOM树中。安全性如前面所说的innerHTML可以插入正确的html语法的html字符串，当然也包括script标签。只需要在script标签上加上defer属性，并且以一段非包含其他标签的html代码插入到DOM中，script中的js就会被执行。var tagHtml = some text, scriptHtml=alert(Hello);document.body.innerHTML = tagHtml + scriptHtml; / Hello由于可以通过以上方式插入并执行脚本，对于把非信任来源的html字符串用inn