很多时候，需要通过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>
<button onclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv"></div>
<p></p>
<script type="text/javascript">
function getContent() {
var str = "added content \<br\>" +
"\<input name=\'myname\' id=\'myname\'\>" +
"\<button onclick=\'getName()\;\' name=\'getName\' id=\'getName\'\>Get Name\<\/button\>" +
"\<script type=\'text\/javascript\'\>" +
"function getName() {" +
"alert(\'ok\')\;" +
"document.getElementById(\'myname\').value = \'Bill\'\;" +
"}" +
"\<\/script\>";
document.getElementById("myDiv").innerHTML=str;
var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);
var newScript = document.createElement("SCRIPT");
newScript.innerHTML = myDivScript.innerHTML;
document.getElementsByTagName("HEAD").item(0).appendChild(newScript);
}
</script>
</body>
</html>
分享到：
相关推荐
解决ajax返回innerHTML中javascript不能运行问题
如果你读过 MSDN，你会发现并非所有插入到 innerHTML 中的脚本都不能执行，如果这段脚本的 script 标签中包含了 defer 属性，IE 会正确的执行这些脚本程序。但不幸的是，Moziila/Firefox 和 Opera 可不吃这一套，...
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 ... 如果你读过 MSDN，你会发现并非所有插入到 innerHTML 中的脚本都不能执行，如果这段脚本的 script 标签中包含了 defer 属性，
调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件
我们需要吧<p>Hello World插入到<p>My name is Pjee应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` My name is Pjee <p v-html='text'></p> 注意：你的站点...
用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如: html: 代码如下: <body>.../body>... 解决方法： 把onclick绑定到父元素，利用冒泡原理，判断当前元素是否为d1,若
既然只在文档加载中才被解析，那么我就得调用[removed]()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把[removed]()装载起来。 解决问题 var jsCode = 需要执行的JS代码 ...
innerHTML的简单应用
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
尝试了几次发现,插入的HTML里,[removed]前面有其他对象,并且script 设置了 defer , 这样的脚本innerHTML被IE执行了. ,但是这招对于firefox不灵~~ 后来找了一些资料发现 firefox 把对象重新 append 或者...
由于我一直是用createElement来创建动态的option并添加，所以一直没有遇到这个问题，但是每个人写代码风格不同，有的人就喜欢写字符串形式的标签并用innerHTML插入，这不就有问题了，为了方便不同编码风格的人，我...
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
[removed] ”trone”> </tr> 在IE中，有时候会出现”未知的运行时错误(unknown runtime error)”,而在firefox里不会。 这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的...
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
对于IE，首先, script 标签必须带 defer 属性，其次,在插入时刻，innerHTML 的所属节点必须在 DOM 树中. 对于 Firefox 和Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。 根据上面结论，给出通用的设置...
然而，你需要知道 innerHTML 有一些自身的问题： 1、当 HTML 字符串包含一个标记为 defer 的 script 标签（[removed]…[removed]）时，如 innerHTML 属性处理不当，在 Internet Explorer 上会引起脚本...