javascript中innerHTML的是与非 innerhtml js

分享：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 = '

可以发现，一个p元素的innerHTML只能包含文本和内联元素。再看一个例子，同样在IE8以下：

?

????

?

document.getElementById('abc').innerHTML = '

出错原因就是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 text

el.innerHTML = '

some str

some 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所在的容器的内容，移除el

document.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='';

document.body.innerHTML = tagHtml + scriptHtml; // "Hello"

由于可以通过以上方式插入并执行脚本，对于把非信任来源的html字符串用innerHTML插入，存在安全性问题，容易受到脚本攻击。

小结

以上悉数了innerHTML的各种是非。总的来说，用innerHTML来追加移除DOM元素还是很方便的，但在使用innerHTML方法的时候，要多些注意一下兼容性、性能影响和安全性。