How to write HTML with JavaScript. Examples on how to use JavaScript to create HTML.
	RoadDust's JavaScript Tutorial Learn how to write HTML with JavaScript
Write HTML using JavaScript. See how JavaScript can be used to write HTML.

Welcome to RoadDust's JavaScript tutorial. Here you will Learn how to write HTML with JavaScript. As you will see in this JavaScript tutorial, you can use JavaScript to write HTML tags.

Write HTML using JavaScript.

See how JavaScript can be used to write HTML.

Writing HTML using JavaScript is very simple. There are in fact two distinct ways of writing HTML using JavaScript which I will discuss here.

How to use JavaScript to write HTML

Writing HTML using JavaScript while the page is loading

The first method is to write the HTML as the page is being loaded. take the following JavaScript syntax for example.

<SCRIPT LANGUAGE="JavaScript">
document.write("<b>hello<\/b>");
</SCRIPT>

The above example shows you how to use JavaScript to write HTML as the page is being loaded. This is the equivalent of writing the HTML code exactly where the script tag is inserted within the page. In this example, using JavaScript to write HTML is not very useful since you could have simply used HTML to write what you wanted. However, if you want your website to say random things, you could write something like this.

<SCRIPT LANGUAGE="JavaScript">
var rndNum = Math.floor(Math.Random() * 3)
if(rndNum = 0)document.write("<B>hello<\/B>")
else if(rndNum = 1)document.write("<B>welcome<\/B>")
else if(rndNum = 2)document.write("<B>greetings<\/B>")
</SCRIPT>

The above script tag can be inserted anywhere on your web page. It will write either hello, welcome or greetings depending on the result of the random operation.

This was the method of writing HTML using JavaScript while the page is loading. For many instances this may be useful. However, there may be times where you will need JavaScript to write HTML after the page has been loaded.

Writing HTML using JavaScript after the page has finished loading

Using JavaScript to write HTML after the webpage has been loaded is a whole different story. It is important to remember that you cannot use the above code to write to a webpage in a function that will be executed after the webpage has been loaded.

The following example will show you how to use JavaScript to write HTML once the webpage has finished loading. You will see that using the following example will result in re-writing the entire webpage.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function newPage(){
	document.open();
	document.write('<HTML>');
	document.write('<'+'!--' + this is a comment + '-'+'->');
	document.write('<P>This is the new page.<\/P>');
	document.write('<P>Welcome to the new page.<\/P>');
	document.write('<\/HTML>');
	document.close();
}
</SCRIPT>
</HEAD>  
<BODY>
<INPUT TYPE="button" VALUE="New Page" ONCLICK="newPage()">
</BODY>
</HTML>

The above code example is a webpage with a single button. When the button is clicked, it will write a whole new HTML page. In the above example you can also see how to write a comment within the HTML of the new page (even though this may be a rather strange thing to do). As you may have noticed I put the opening and closing HTML tags in the new page being written just to show you that they belong there. If you were to use this method I would advise to write the HEAD, TITLE and BODY tags as well.

How to use JavaScript to append HTML

Appending HTML using JavaScript after the page has finished loading

You can use JavaScript to append HTML to a web page that has finished loading. That's right, it is possible to add HTML after the webpage has finished loading. In the following JavaScript code example, a button is used to display the date on the webpage and also adds an HTML tag to bold the text.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function addHTML (html) {
  if (document.all)
    document.body.insertAdjacentHTML('beforeEnd', html);
  else if (document.createRange) {
    var range = document.createRange();
    range.setStartAfter(document.body.lastChild);
    var cFrag = range.createContextualFragment(html);
    document.body.appendChild(cFrag);
  }
  else if (document.layers) {
    var X = new Layer(window.innerWidth);
    X.document.open();
    X.document.write(html);
    X.document.close();
    X.top = document.height;
    document.height += X.document.height;
    X.visibility = 'show';
  }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="button"
       value="SHOW DATE"
       onclick="addHTML('<B>' + new Date() + '<\/B><BR \/>');"
/>
</FORM>
</BODY>
</HTML>

The script above takes into consideration the different types of web browsers that could be used to view your webpage. In the JavaScript example above to detect if someone is using IE4 and up the condition "if (document.all)" is used. If this condition is not met, it will then check if you are using NN6 (Netscape Navigator 6) by using the condition "document.createRange". Otherwise, it will use the condition "document.layers" to check for NN4.