{{{{ JavaScript - Generate HTML }}}}

It is possible to set up HTML from within JavaScript.

Writing HTML

Dynamic HTML

Example - questions

External JavaScript

Summary of colours in code: green is HTML useful for JavaScript, red is JavaScript, blue is a name and everything else is grey.

Writing HTML

The following example writes some HTML from within JavaScript. This can only be done as the page is loaded. This means that the code must be done in the main part of the webpage, or in a function called from the main part of the webpage. You cannot use document.write in ONCLICK or similar, as by the time that code is run, the webpage will have already been generated.

You can see that you can generate HTML using literals or variables. Remember that this is true HTML, so the <BR> gets actioned.

The date is set up using Date (). This gives you today's date in a fixed format. You can also get the day, month and year or the hour of day.

The line below is generated by JavaScript.

<HTML>
<HEAD>
</HEAD>
<BODY>
The line below is generated by JavaScript.
<SCRIPT TYPE="TEXT/JAVASCRIPT">
var today = new Date ()
document.write ("<BR>Today's date is ")
document.write (today)
</SCRIPT>
</BODY>
</HTML>

Dynamic HTML

A webpage is set out when it is first loaded. However, you can alter it when people start to use it, by clicking on a picture or a button or typing something into a text box. This is called dynamic HTML.

First, you must show where you want the changed HTML to go. You need <SPAN ID="..."> --- </SPAN> - the ID is like a NAME. You can put some HTML inside the SPAN. Here I have "Type something into text box" but you could use other valid HTML, or even have nothing at all. Then I have set up a text box, with ONKEYUP. The JavaScript code within here refers to the SPAN ID in front of .innerHTML - this means that if you enter anything into the text box, then the HTML inside the SPAN will be disappear and be replaced by what follows. This is a string, with the contents of the text box inside <H1> and </H1> (remember that strings are joined together with +). In this case, the HTML that I am generating is a simple Heading, but you could do several lines of HTML if you wish. The <H1> is described as a literal, since while it is inside the JavaScript it is merely a string. It isn't actioned as HTML until the ONKEYUP is actioned. <H1> is inside single quotes as the ONKEYUP uses double quotes, and you don't want to get them muddled up. It doesn't matter if you use single or double quotes, but if one use is inside another, then you must use different type of quotes.

The effect when you type something into the box is that it appears, larger, above the box.

The SPAN can appear after the text box if you wish.

Type something into text box

<HTML>
<HEAD>
</HEAD>
<BODY>

<SPAN ID="big">Type something into text box</SPAN>

<FORM ACTION="#" NAME="enlarge">
<INPUT TYPE=TEXT NAME="inp" SIZE=40
ONKEYUP="document.getElementById('big').innerHTML='<H1>'+enlarge.inp.value+'</H1>'">
</FORM>

</BODY>
</HTML>

The JavaScript code to set up this dynamic HTML is rather a mouthful! There is an easier version as follows:

big.innerHTML='<H1>'+enlarge.inp.value+'</H1>'

Unfortunately, while this works in Mozilla as well as Windows, Mozilla gives some warning messages. Since I am trying to give code which follows standards, I will be using the long version. But if you prefer the shorter version (which does work!), then it's up to you.

Example - Questions

In a webpage, you may want to ask a question, and then depending on the answer, change the rest of the webpage - perhaps adding more questions. This can be done with dynamic HTML.

This is a short version, which shows the technique, but is not a very sensible webpage! The longer example gives a more sensible version.

The normal HTML sets up a SELECT box. Once you select something, it calls the function 'setup' (using ONCHANGE). This function inserts another SELECT box into the SPAN defined in the normal HTML. Since this is dynamic HTML, it can set up different SELECT boxes depending which original option you choose. I have coloured this dynamic HTML like ordinary HTML, but remember that it is within quotes marks - it is essentially a literal. Since this literal is liable to get very long indeed, it is better to set up a variable (I have used the name 'lit') containing the HTML, and then you can allocate the dynamic HTML with a single statement. HTML tends to contain quote marks, and dynamic HTML is a literal, which must be contained within quote marks, so if you are not careful, you are going to get your quotes muddled up. (I did, coding this example!) Try to use one type of quotes for HTML and another for JavaScript to avoid this. In this example, I used double quotes for HTML and single for JavaScript. It doesn't have to be this way round, of course.

<HTML>
<HEAD>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function setup(ans) {
  lit = ''
  if (ans == 'anim') {
    lit = 'How many legs ? '
    lit = lit + '<SELECT NAME="q2" ONCHANGE="alert(document.quest.q2.value)">'
    lit = lit + '<OPTION VALUE="">- Please select -</OPTION>'
    lit = lit + '<OPTION VALUE="cat">4</OPTION>'
    lit = lit + '<OPTION VALUE="sparrow">2</OPTION>'
    lit = lit + '<OPTION VALUE="snake">0</OPTION>'
    lit = lit + '</SELECT>'
  }
  if (ans == 'min') {
    lit = 'What colour ? '
    lit = lit + '<SELECT NAME="q2" ONCHANGE="alert(document.quest.q2.value)">'
    lit = lit + '<OPTION VALUE="">- Please select -</OPTION>'
    lit = lit + '<OPTION VALUE="emerald">green</OPTION>'
    lit = lit + '<OPTION VALUE="ruby">red</OPTION>'
    lit = lit + '<OPTION VALUE="sapphire">blue</OPTION>'
    lit = lit + '</SELECT>'
  }
  document.getElementById('rep').innerHTML=lit
}
</SCRIPT>
</HEAD>
<BODY>

<FORM ACTION="#" NAME="quest">
<SELECT NAME="q1" ONCHANGE="setup(document.quest.q1.value)">
<OPTION VALUE="">- Please select -</OPTION>
<OPTION VALUE="anim">Animal</OPTION>
<OPTION VALUE="min">Mineral</OPTION>
</SELECT>

<SPAN ID="rep"></SPAN>

</FORM>

</BODY>
</HTML>

External JavaScript

I am not going to give a working example of this, as it's a bit complicated. But I want to document it as it's useful.

It is possible to have external JavaScript - that is, a file of JavaScript by itself, which can be loaded into a webpage at run time. Why should you do this? One reason is that you might want a piece of JavaScript used by several webpages. For example, you might want a standard heading to every webpage in your website. You could copy the code into each page, of course, but then, if you wanted to change it, you would have to change every page, which would be a bore. Or you might have a date-dependent routine, which needs to be updated from time to time. If you forgot to change every occurrence of the code, it would matter. Have only one copy of the code in an external JavaScript file, and you avoid this.

First, you need to set up the external JavaScript file. This is just simple JavaScript, without any <SCRIPT TYPE="TEXT/JAVASCRIPT"> or </SCRIPT>. Put the code into functions (you can have more than one). Save it as "name.js" - for example "header.js". It would be sensible to save it in the same folder as the webpages that are going to use it, or nearby. It will have to be on your server, at least.

function pagehead() {
document.write('<H2>Header</H2>')
}

Save on your server as header.js

Now you need to write the code inside your webpage to load this code.

<HTML>
<HEAD>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="header.js"></SCRIPT>
</HEAD>

<BODY>

<SCRIPT TYPE="text/javascript"> pagehead() </SCRIPT>

The rest of the webpage!

</BODY>
</HTML>

So there are two things to do. Reference the external JavaScript file inside HEAD. Use the function you have defined in this external JavaScript file inside a <SCRIPT TYPE="TEXT/JAVASCRIPT"> --- </SCRIPT> in BODY or HEAD. Since you reference the function by name, you can have more than one function in the external JavaScript file, and use each as you want it, where you want it.

Return to JavaScript index