ccc\r

 

innerhtml中加入PHPjavascript中innerHTML的是与非 Ruby

\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无效:

\r

var el = document.getElementsByTagName('select')[0],

\r

         inner = '';

\r

el.innerHTML = inner; // 无报错,但无效

\r

办理方案有多种:

\r

var el = document.getElementsByTagName('select')[0];

\r

// 方案一        

\r

el.add(new Option('text', \公众value\"大众));

\r

// 方案二

\r

var op = document.createElement('option');

\r

op.innerText = 'text';

\r

op.value = 'value';

\r

el.appendChild(op);

\r

最诡异的一次是,在IE8以下:

\r

var el = document.getElementsByTagName('div')[0];

\r

el.innerHTML = '

some text'; // \"大众未知的运行时缺点\"大众 \r

el.innerHTML = '

some textsome str'; // \公众未知的运行时缺点\"大众 \r

el.innerHTML = '

some str

some text'; // 正常\r

关于表达式

\r

html字符串中,p标签包含pre标签,并且和p的开始标签和pre的开始标签之间没有任何字符串,都会报“未知的运行时缺点”。

\r

IE8以下的浏览器在处理html构造上比较严格,为此给我们利用innerHTML的时候带来了很多不便。
对付一些不适宜利用innerHTML的元素,办理方案上,就必须用创建DOM元素(如createElement)和添加DOM元素的方法来设置DOM树的内容。
像这样的兼容性还有待创造,总的觉得,特殊是IE8以下的浏览器,在利用innerHTML的时候,要特殊考虑兼容性测试。

\r

内存泄露

\r

导致IE的内存泄露缘故原由,常听到的有“闭包导致内存泄露”或者“没有解除事宜导致内存泄露”,还有常见的“循环引用”等。
innerHTML的办法设置DOM元素的内容,以移除DOM元素下的子元素。
也会产生“没有解除事宜导致内存泄露”和“循环引用”的问题。
如:

\r

var el = document.createElment('div');

\r

el.onclick = function () {

\r

         //循环引用el

\r

         el.style.color = '#000';

\r

};

\r

document.body.appendChild(el);

\r

//重置el所在的容器的内容,移除el

\r

document.body.innerHTML = '';

\r

如果循环实行以上代码,就会创造由于el的循环引用,el所占用的内存没有被开释。
还有其余一种情形也会导致内存透露。

\r

var el = document.createElement('div');

\r

el.innerHTML = 'Test Link';

\r

document.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就会被实行。

\r

var tagHtml = '

some text

',\r

         scriptHtml='';

\r

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

\r

由于可以通过以上办法插入并实行脚本,对付把非信赖来源的html字符串用innerHTML插入,存在安全性问题,随意马虎受到脚本攻击。

\r

小结

\r

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