动态添加JavaScript代码到页面

此问题与Frustrating innerHTML Issue有关。动态添加JavaScript代码到页面

由于这个问题是另一个问题的重复，所以我提到了这个问题的解决方案。我通过了列表中的第二个答案（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键，我所有的当前页面被删除了的存在，只有代码的文件撰写（）内仍然存在。我做错了什么？请注意，我想的JavaScript代码添加到我的页面而不删除当前的可视对象：S

来源

2015-11-04 Youstay Igo

当您执行document.write时，您为其分配一个值，因此以前的值将被删除。您将不得不将值附加到容器。您可以使用此[文章]（http://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript）作为参考 – Rajesh

的问题是，当我按下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);};' />"; 
}

来源

2015-11-04 11:44:42 Filype

这看起来很有前途。我应该试试看看它是否有效。 –

确定这不起作用。代码**被**追加到文档主体，但由于原因不明和未知，其javascript部分未被_executed_。所以当我按下CHECK按钮时，不会出现消息框。但是，当我编辑CHECK按钮编码以提醒（document.body.innerHTML）时，它显示该行已成功附加了SET按钮代码。我究竟做错了什么？ –

shouldn; t函数msgbox被定义在setcode函数的上方，而不是在图像的onload属性内？ – Filype

OK，我发现我的问题了辉煌的工作方案。这是第二个答案张贴在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>

作品完美，没有任何故障或问题。感谢肯尼贝克的答案。

来源

2015-11-04 12:46:01

动态添加JavaScript代码到页面

回答

相关问题