How to insert a block of javascript code to a html page...

Forum Moderators: open

Message Too Old, No Replies

How to insert a block of javascript code to a html page...

using another javascript code.

iProgram

5:22 am on Dec 17, 2004 (gmt 0)

HTML code

...
<hr>
<span id="test"></span>
<hr>
...

The following js code will insert "Hello JS" to above html page, and it works:

document.getElementById('test').innerHTML="Hello JS";

My question is, how to insert another javascript code to above html page and run it. For example, the following code is my first try, which does not work:(

var myjs = "<script>alert('hello js');</script>";
document.getElementById('test').innerHTML=myjs;

Rambo Tribble

5:36 am on Dec 17, 2004 (gmt 0)

innerHTML simply writes HTML as a string; it doesn't call the JavaScript interpreter to parse and execute any scripts that are part of the string.

I don't think it will be possible to do exactly what you are asking by working with nodes either. Scripts are loaded and executed when the page loads, with the exception that functions are run when called by an event.

Why not just write whatever HTML you want with innerHTML then, in the same script, execute whatever JavaScript you want executed?

iProgram

5:43 am on Dec 17, 2004 (gmt 0)

I do not want to use so many js codes in my clean, beautiful XHTML page:)

I will try document.write inside <span>, thanks.

john_k

6:58 am on Dec 17, 2004 (gmt 0)

var myjs = "<script>alert('hello js');</script>";
document.getElementById('test').innerHTML=myjs;

and run it is the key to your issue. The way you have it written, there is not a very clear way to determine if it has worked or not because there is nothing triggering the script to run. Also, there is probably an issue with the <script> and </script> tags in the first line.

The way you have it written is the way you would write the javascript into a new document, such as might be done in a popup or iframe. When attaching some javascript to an element on an existing document, you don't need the <script> tags.

Try:
var myjs = 'alert(\'hello js\')';
document.getElementById('test').onmouseover=new Function(myjs);

Here is a full html page that sets a onmouseover and onclick. Hopefully this will get you pointed in the right direction:


<html> 
<head> 
<title>Test</title> 
<script language="javascript"> 
<!-- 
var oldmouse; 
var oldclick; 
function tst() 
{ 
  document.getElementById('test').onclick=new Function('alert(\'hello js 2\')'); 
  document.getElementById('test').onmouseover=oldmouse; 
} 
//--> 
</script> 
</head> <body> 
<hr> 
<span id="test">sdfasdfasdfasdfaf</span> 
<hr> 
<form> 
<input type="button" value="test1 - set onmouseover" onClick="var myjs='alert(\'hello js 1\')';document.getElementById('test').onmouseover=new Function(myjs);document.getElementById('test').onclick=oldclick;" /> 
<input type="button" value="test2 - set onclick" onClick="tst()" /> 
</form> 
</body> 
<script language="javascript"> 
oldmouse=document.getElementById('test').onmouseover; 
oldclick=document.getElementById('test').onclick; 
</script> 
</html>

ricfink

11:33 pm on Dec 17, 2004 (gmt 0)

In order to do what you want, you have to use the document object model to create a script element, give it the content that you want, put it somewhere on the page (ie: last element of head) and then it will not only be created but it's contents will execute immediately.