Question

由于这个问题与另一个问题重复，所以我提到了这个问题的解决方案。我在列表中采用了第二个答案（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

Answer 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);};' />";
}

Answer 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的回答。

动态添加JavaScript代码到页面

2 个答案: