Inserting An External JavaScript File Into JavaScript

When attempting to use document.write() to insert an external JavaScript file into a web page, the </script> tag within the document.write() statement can spawn an error. (The action is sometimes called "nesting," as in nesting one command inside another.)

There is a work-around.

Let us suppose this is the original attempt:

<script type="text/javascript">
document.write('<script type="text/javascript" src="file.js"></script>');
</script>

What happens is that the </script> tag in the document.write() closes the JavaScript code block. That spawns an error because the document.write() command wasn't properly closed first.

Yet, that </script> tag must be there in order to close the nested script tag.

Here is the workaround.

<script type="text/javascript"><!--
document.write('<scr' + 'ipt type="text/javascript" src="file.js"></scr' + 'ipt>');
//--></script>

Notice that the word "script" was replaced with "scr' + 'ipt" in both places. In that way, the complete word "script" is nowhere in the JavaScript. Yet, when the code runs, the words will be concatenated correctly.

Both the tag and the closing tag were changed to "scr' + 'ipt" to remove any ambiguity any browser might find. The code then runs as expected.

Edit (8 days after original publication): The HTML comment tag to hide the document.write() line from non-JavaScript browsers was added because at least one XHTML validator tries to validate JavaScript. And it protests what it misinterprest as broken tags: <scr'+'ipt... and </scr'+'ipt>

Will Bontrager