IE not showing this correctly

Internet Explorer does not render this script correctly

[metaman01]

I have this issue with Internet Explorer not rendering the page as I suppose it should using some external JS files.

<script type="text/javascript" src="myscript1.js"></script> outputs some text 1
<script type="text/javascript" src="myscript2.js"></script> outputs some text 2

Then I try this:

function showlist(){
var text1 = '<script type="text/javascript" src="myscript1.js"></script>';
var text2 = '<script type="text/javascript" src="myscript2.js"></script>';
document.write('<ul><li>'+ text1+'</li><li>'+ text1+'</li></ul>');
}

Opening this in Firefox it outputs:

* some text 1
* some text 2

(And this is what I want to.)

Opening this in IE gives this:

*
*
some text 1 some text 2

First the bullet points are rendered, then the text. Does anybody know why this is happening, and what to do to avoid it?

[MarkFilipak]

Try escaping the forward-slash characters in the string definitions like this:

var text1 = '<script type="text\/javascript" src="myscript1.js"><\/script>';
var text2 = '<script type="text\/javascript" src="myscript2.js"><\/script>';
document.write('<ul><li>'+ text1+'<\/li><li>'+ text1+'<\/li><\/ul>');

Let me know if it fixes your problem.

[DrDoc]

The problem is that IE first writes the HTML, then evaluates the scripts.
Not sure if there's a way around that ...

[metaman01]

Thanks, both of you, I will try to escape the character to see if it is any difference.

Since I use JavaScript to print the HTML I thought that it would be the same, but maybe this has something to do with the external scripts?

[rocknbil]

Dr Doc, would this do it?

If those scripts output text, they certainly (or should, or could) contain functions that output the text. If the scripts are inline, wrap them in a function. Then you should be able to do

window.onload = function () {
var text1 = output_from_script_1_function();
var text2 = output from script_2_function();
}

then wherever you need it,

<script type="text/javascript">
document.write('<ul><li>'+ text1+'</li><li>'+ text2+'</li></ul>');
</script>

Alternatively, just add your formatting and document.write() to the scripts and drop it in.

<ul>
<script type="text/javascript" src="myscript1.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
</ul>

[DrDoc]

<script type="text/javascript" src="myscript1.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
<script type="text/javascript">
var text1 = output_from_script_1_function();
var text2 = output from script_2_function();
document.write('<ul><li>'+ text1+'</li><li>'+ text2+'</li></ul>');
</script>

That would work ...