zhangpeng 2014-09-05
通过innerHTML写入<style>元素没有得到浏览器很好的支持,IE9、Opear 9、Chrome高版本和Firefox高版本支持以直观的方式通过innerHTML插入<style>元素,例如:
div.innerHTML = "<style type=\"text/css\">body {background-color: red;}</style>";
在IE6和IE7中会忽略这个<style>元素。在IE中,<style>也是一个作用域外元素,因此必须想下面这样给它前置一个作用域元素:
div.innerHTML = "_<style type=\"text/css\">body {background-color: red;}</style>" div.removeChild(div.firstChild);
低版本的Safari和Chrome则会因为没有将这个<style>元素添加到<head>元素而继续忽略它。如果想在所有浏览器中成功插入<style>元素,就必须想下面这样:
//针对低版本IE div.innerHTML = "_<style type=\"text/css\">body{background-color: red;}</style>" div.removeChild(div.firstChild); //针对低版本Safari和Chrome document.getElementsByTagName("head")[0].appendChild(div.firstChild);
在新创建的<style>元素添加到<head>后,低版本的Safari和Chrome会应用新样式。
现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="<input type="button" name=&qu
JavaScript代码innerHTML='<option>1</option>'的时候测试出来的结果却是"1</option>",ie6 7 8 都存在这个问题。经过测试,发现 在用innerHT