将 JavaScript 代码动态添加到页面答案

【问题标题】：Dynamically Adding JavaScript Code To Page将 JavaScript 代码动态添加到页面
【发布时间】：2016-02-04 21:25:05
【问题描述】：

由于此问题与另一个问题重复，因此我参考了该问题以寻求解决方案。我通过了列表中的第二个答案（37 票）。所以我使用这种编码将javascript动态添加到我的页面。

<html>
<head><title>Javascript Using innerHTML</title>
<script type="text/javascript">
    function setcode(code)  {
    document.write("<img src='empty.gif' onload='function msgbox(msg){alert(msg);};' />");
    }
</script>
</head>
<body onload="">
<div id="hello">
    &nbsp;
</div>
<button onclick='setcode(document.getElementById("hello"))'>SET</button>
<button onclick='msgbox("what up man?!");'>CHECK</button>
</body>
</html>

现在的问题是，当我按下 SET 按钮时，我当前的所有页面都将不复存在，只保留 document.write() 中的代码。我做错了什么还是什么？请注意，我想将 javascript 编码添加到我的页面而不删除当前的视觉对象：S

【问题讨论】：

当您执行 document.write 时，您会为其分配一个值，因此之前的值会被删除。您必须将值附加到容器。您可以将此article 用作参考

标签： javascript

【解决方案1】：

问题是当我按下 SET 按钮时，我当前的所有页面都被删除，只剩下 document.write() 中的代码

这是document.write 函数的预期行为。它将覆盖页面上的所有内容。

您需要将内容附加到可以使用以下内容的页面：document.body.innerHTML += "<img src..">

您的示例如下所示：

function setcode(code)  {
   document.body.innerHTML += "<img src='empty.gif' onload='function msgbox(msg){alert(msg);};' />";
}

【讨论】：

这看起来很有希望。我应该试试这个，看看它是否有效。
好的，它不起作用。代码正在被附加到文档正文中，但由于蹩脚和未知的原因，它的javascript部分没有被执行。这样当我按下 CHECK 按钮时，不会出现应有的消息框。但是，当我将 CHECK 按钮编码编辑为 alert(document.body.innerHTML) 时，它显示该行已成功附加 SET 按钮代码。我做错了什么？
是否应该将函数 msgbox 定义在 setcode 函数之上，而不是在图像的 onload 属性内？
顾名思义，编码的目的是动态向页面添加javascript代码。如果我在页面的开头有任何硬定义的代码，我会简单地将它添加到 head 部分并完成它。另外，请查看顶部链接的问题。我认为用于此目的的整个 innerHTML 方法是不正确的。因为我能够在上一个问题中成功地将代码添加到 DIV 的 innerHTML 中，并且这也没有被执行

【解决方案2】：

好的，我为我的问题找到了一个出色的工作解决方案。这是Can I add javascript dynamically to an existing script element发布的第二个答案

<html>
<head><title>Javascript Using innerHTML</title>
<script type="text/javascript">
    function setcode(code)  {
    var JS=document.createElement("script");
    JS.text="function msgbox(msg){alert(msg);}";
    document.body.appendChild(JS);
    }
</script>
</head>
<body onload="">
<div id="hello">
    &nbsp;
</div>
<button onclick='setcode(document.getElementById("hello"))'>SET</button>
<button onclick='msgbox("hello");'>CHECK</button>
</body>
</html>

完美运行，没有任何故障或问题。感谢 kennebec 的回答。

【讨论】：