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

It is possible to set up HTML from within JavaScript.

Writing HTML

Dynamic HTML

Example - questions

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="q2" 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>

Return to JavaScript index