Dynamically Adding JavaScript Code To Page

Question

This question is linked with Frustrating innerHTML Issue.

Since this question was a duplicate of another question, so I referred to that question for a solution. I adopted the 2nd answer in the list (with 37 votes). So that I used this coding for dynamically adding javascript to my page.

<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>

Now the issue is that when I press the SET button, all my current page is removed out of existence and only the code within document.write() remains. Am I doing something wrong or what? Note that I want to add javascript coding to my page without removing the current visual objects :S

When you do document.write, you assign it a value, so previous value is erased. You will have to append value to a container. You can use this [article](http://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript) as reference — Rajesh, Nov 04 '15 at 11:43

score 1 · Answer 1 · answered Nov 04 '15 at 11:44

1

the issue is that when I press the SET button, all my current page is removed out of existence and only the code within document.write() remains

That's the expected behaviour for the document.write function. It will overwrite all the content on the page.

You need to instead append content to the page you can use the following: document.body.innerHTML += "<img src..">

Your example would look as follows:

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

answered Nov 04 '15 at 11:44

filype

8,034
10
40
66

This looks promising. I should try this and see if it works. – Youstay Igo Nov 04 '15 at 11:46
OK It's not working. The code **is** being appended to the document body, but for reasons lame and unknown, the javascript part of it is not being _executed_. So that when I press the CHECK button, not message box appears as it should. However, when I edit the CHECK button coding to alert(document.body.innerHTML), it shows that the line was successfully appended by the SET button code. What am I doing wrong? – Youstay Igo Nov 04 '15 at 11:53
shouldn;t the function msgbox be defined above the setcode function and not inside the onload attribute of an image? – filype Nov 04 '15 at 11:55
As the title implies, the aim of the coding is to **dynamically** add javascript code to the page. If I had any hard-defined code at the start of the page, I would simply have added it in the head section and done with it. Also, check out the question linked at the top. I think the whole innerHTML approach for this purpose is incorrect. As I was being able to successfully add the code in a DIV's innerHTML in the previous question and that was also not being _executed_ – Youstay Igo Nov 04 '15 at 12:00

score 0 · Answer 2 · edited May 23 '17 at 10:27

OK, I found a brilliant working solution for my problem. It is the second answer posted at 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>

works flawlessly without any glitch or issue. Thanks to kennebec for the answer.

Dynamically Adding JavaScript Code To Page

2 Answers2