• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Adding External Content with JavaScript

Adding External Content with JavaScript

Although JavaScript is typically used to add interactivity to a Web page, the <script> tag can also import an external file. That file can contain HTML tags and content, which are in turn placed into the HTML document using the document.write method.

The advantage of this method is that you can use the JavaScript to tailor the content as needed, dynamically including titles, images, or anything you can think of.

To add an external JavaScript file:


Create an HTML file into which the external JavaScript file will be embedded and save it (Code 4.6). Steps 2 and 3 apply to this file.

Code 4.6. You can place the <script> tag anywhere in your HTML document, but to add visible content, you need to place it in the body of the document. This allows you to write HTML into the page with JavaScript.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced | Using
        → an External JavaScript File</title>
        <script language="JavaScript"><!--
           cNum=5;//Chapter Number
								cTitle='Wool and Water';//Chapter Title
// -->
        <script src="javascript/external.js"></script>
        <p><img src="Alice_5_2. jpg" alt=""
        → width="317" height="406"
        → align="right" border="0"/>She caught
        → the shawl as she spoke...</p>



Add any JavaScript variables that will be used by external.js to customize the page.

<script src="javascript/
→ external.js"></script>

Importing an external JavaScript file is as simple as adding the src attribute to the <script> tag. Don’t place anything between the open and close <script> tags. This method places the external JavaScript in the HTML file at this exact location. If the JavaScript will add HTML tags to the page, those tags will be added to the page in this location.


Create an external JavaScript file, and save it as external.js (Code 4.7), preferably in a folder called javascript, since you may need to add multiple external JavaScript files. This file can contain any standard JavaScript, but to deliver content, you need to have the code write the HTML tags and other content. Steps 5–9 apply to this file.

Code 4.7. The external JavaScript file (external.js) can include any JavaScript code, but can also be used to write HTML code and content into the page.

// External JavaScript used to create chapter
→ headers
var writePage='';
								writePage+='<a href="toc.html">Table ofContents</a>';
if (cNum != 0) {
								writePage+='<h2>Chapter ' + cNum + '</h2>' ;
								writePage+='<h3>Chapter ' + cTitle +'</h3>' ;
else {

var writePage='';

Set up a variable that will record all of the HTML code that will eventually be written to the page.

writePage+='<a href="TOC.html">
→ Table of Contents</a>';

Add each line of HTML to the variable writePage.

if (cNum != 0) {...}

You can use other JavaScript—such as conditionals—to dynamically add content according to variables on the page into which the JavaScript file is imported.

writePage+='<h2>Chapter' + cNum +
→ '</h2>' ;

You can also combine JavaScript variables to create the code dynamically. In this example, the JavaScript will read variables in index.html to specify the volume number, article number, titles, and date.


Finally, use a document.write() to add all of the code to the page (Figure 4.5).

Figure 4.5. Although the JavaScript imports the content, it also relies on variables in the main HTML document to fill in the blanks (chapter number and chapter title).

✓ Tips

  • The drawback of this method is that you have to place every line of HTML code in JavaScript. This can be labor-intensive, and it makes the file harder to debug and fix in most WYSIWYG programs.

  • If you do place anything between the <script> tags, that content is ignored.

Escaping Characters for JavaScript

Remember, content to be written using JavaScript has to be inside single quotes (’). If you need to include a single quote in the content you’re writing with JavaScript, it has to be preceded by a backslash (\).

So it won’t work to use

document.write ('How's it going?');

The browser will interpret the apostrophe between w and s as a close quote.

Instead use

document.write ('How\'s it going?');

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint