通过innerHTML动态插入的script无法执行的解决方法
zjnig的信息仓库 2012-11-05
很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。
原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。
解决方法：用innerHTML嵌入以后，通过DOM从myDIV中取出嵌入的script节点，然后新创建一个script节点，并把嵌入的script里面的内容也赋给新创建的script节点，然后把这个新节点追加到页面的head节点中，这样就可以调用到里面的函数了。
比如下面的代码，加上红颜色的内容即可（firefox下测试通过，ie需要再调整一下语法）
<html>
<head></head>
<body>
<buttononclick="getContent();"name="getContent"id="getContent">GetContent</button>
<p></p>
<divid="myDiv"></div>
<p></p>
<scripttype="text/javascript">
functiongetContent(){
varstr="addedcontent\<br\>"+
"\<inputname=\'myname\'id=\'myname\'\>"+
"\<buttononclick=\'getName()\;\'name=\'getName\'id=\'getName\'\>GetName\<\/button\>"+
"\<scripttype=\'text\/javascript\'\>"+
"functiongetName(){"+
"alert(\'ok\')\;"+
"document.getElementById(\'myname\').value=\'Bill\'\;"+
"}"+
"\<\/script\>";
document.getElementById("myDiv").innerHTML=str;
varmyDivScript=document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);
varnewScript=document.createElement("SCRIPT");
newScript.innerHTML=myDivScript.innerHTML;
document.getElementsByTagName("HEAD").item(0).appendChild(newScript);
}
</script>
</body>
</html>
相关推荐
现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="<input type="button" name=&qu
JavaScript代码innerHTML='<option>1</option>'的时候测试出来的结果却是"1</option>"，ie6 7 8 都存在这个问题。经过测试，发现 在用innerHT