Hi experts,

I have a weird case to program to and I was wondering if there is an existing solution to get the case working.

I need to be able to display dynamic HTML inside a DIV (can't tell what the html nodes would be) - i.e needs to be flexible. The HTML that goes inside the DIV would have its own Javascript too. I was able to get this code snippet working on Microsoft IE7+, was wondering why the same won't work on firefox.

HTML Code:
			/* the input type = hidden is necessary or the JS won't be accessible */
			/* script defer tag is also necessary */
			function insertHTMLOnButtonPress() {
				var s = "<html><input type='hidden' id='dummyHidden'/><head><script defer='defer'>function dynamicallyInsertedFunction() { alert('Successfully called - dynamicallyInsertedFunction'); } </sc" + "ript></head><body><input type='text' value='Hello World'/><input type='button' onClick='dynamicallyInsertedFunction();' value='Call Dynamically Inserted Method'/></body></html>";
				/* Clearing out innerHTML is also required to flush the innerHTML so that repeated attempts - i.e new HTML/JS should work */
				document.getElementById('wholeBody').innerHTML = '';
				document.getElementById('wholeBody').innerHTML = s;
		<!-- Don't close the div inline, causes some problem and replaces the buttons too -->
		<div id="wholeBody"></div>
		<input type="button" onClick="insertHTMLOnButtonPress();" value="Insert some dynamic html"/>
		<input type="button" onClick="dynamicallyInsertedFunction();" value="Call Dynamically Inserted Method"/>
I have tried a couple of things like
  • Remove the script defer tag
  • Removing the dummy input element added which is required for Desktop IE
  • Removing the empty innerHTML step before replacing it

But none of these appear to work for Mozilla firefox. I am also looking for a similar behavior on Android's default webbrowser (WebView to be more specific) -- Doesn't work there too.