很多时候，需要通过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 中 ...解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题的关键是将 JavaScript 代码从 Ajax 返回的数据中提取出来，并将其添加到 `<head>` 中，让浏览器能够正确地解析和执行。
这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题，我们可以采用以下几种方法： 1. **使用`document.createElement`和`element.appendChild`**：这种方法创建和操作DOM元素是安全的，因为...
在JavaScript的DOM操作中，`innerHTML`属性是一个非常常用的方法，用于设置或获取元素的...通过这样的方法，我们可以有效地解决在AJAX应用中动态插入并执行JavaScript脚本的问题，从而实现更高效、更健壮的Web应用。
当你通过`innerHTML`替换元素的内容时，所有之前绑定的事件处理程序（如`onclick`）都将丢失，因为新插入的HTML不会自动继承这些事件。这是因为`innerHTML`会销毁原有元素及其相关的事件监听器，并创建新的DOM结构。...
动态创建iframe意味着在网页加载后，通过JavaScript代码创建并插入到DOM（文档对象模型）中，而不是在HTML源代码中静态定义。 以下是一个简单的动态创建iframe的例子： ```javascript // 创建iframe元素 var ...
其次，由于安全和性能考虑，一些浏览器可能会阻止或延迟通过`innerHTML`插入的`script`标签的执行，这可能导致广告无法正常显示或功能受限。 在提供的代码示例中，作者展示了如何使用`innerHTML`来插入不同类型的...
在描述中提到的问题是关于在`innerHTML`后插入的脚本是否能够执行。默认情况下，IE和Firefox对嵌入到`innerHTML`中的脚本有不同的执行策略。IE有时会忽略这些脚本，而Firefox则有可能需要特定的操作来触发脚本执行。...
问题的核心在于，不同的浏览器对于innerHTML插入的脚本处理方式不同。例如，Internet Explorer（IE）要求script标签具有defer属性，并且在插入时，innerHTML所在的节点必须已经在DOM树中。而Firefox和Opera则要求在...
document.body.innerHTML += '这是由script1.js动态插入的段落。</p>'; ``` 而`script2.js`包含： ```javascript document.body.innerHTML += '这是由script2.js动态插入的段落。</p>'; ``` 当页面加载完成并执行...
如果JQuery方法直接将包含<script>的内容插入到DOM中，这些<script>标签内的代码很可能会被执行，导致不可预期的行为。 然而，在AJAX应用中，经常需要局部更新页面中的内容，这通常包括更新含有<script>块的HTML。...
### innerHtml用法精解 #### 一、InnerHtml简介及基本用法 `innerHTML`是HTML DOM（Document ...通过以上分析，我们可以更好地理解`innerHTML`的使用方法及其注意事项，从而在实际开发中更加灵活地运用这一功能。
通过使用正则表达式提取并执行脚本或动态创建`<script>`标签的方法，可以有效地解决问题。不过需要注意的是，这两种方法都有各自的优缺点，在实际应用中应根据具体情况选择合适的方法。此外，考虑到安全性因素，推荐...
本篇将详细解释两种不同的方法来实现这一功能，通过`innerHTML`属性和使用`createElement`、`appendChild`等DOM操作。 **方法一：使用innerHTML属性** `innerHTML`是HTML元素的一个属性，它允许我们获取或设置元素...
通过创建新的`<script>`元素并将其插入到DOM树中，或者直接修改现有`<script>`元素的`src`属性，可以实现JavaScript代码的动态加载。 二、动态注入的常见方法 1. 创建`<script>`元素： ```javascript const ...
首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果： 代码如下:<!doctype html><html dir=”ltr” lang=”zh-CN”> <head> <meta charset=”utf-8″ /> <title> IE的...
因此，在处理大量数据时，使用DOM操作（如创建新节点、插入和删除节点）通常比直接使用innerHTML更有效率。 此外，innerHTML在处理富文本时需要特别注意安全问题，因为它可以执行嵌入在HTML中的JavaScript代码。在...
使用DOM方法如`createElement()`, `appendChild()` 和 `innerHTML`，我们可以创建新的元素并将其插入到现有元素中。 2. **创建新行**：在HTML表格中，我们通常使用`<tr>`元素表示行。在JavaScript中，首先需要创建...
如果必须在`<head>`中插入JS，可以使用`window.onload`事件来确保代码在页面完全加载后执行： ```html <script> window.onload = function() { // 你的JS代码 } </script> ``` 外部引用JS文件时，`<script>...