Javascript: Writing HTML in JS

In this tutorial, we will learn about writing HTML in Javascript.
The way we’re going to do it in this tutorial is by using the write method on the document object.

Let me firstly explain what that means. An object is a term in Object Oriented Programming, and is essentially what an object is in real life. It’s a thing we can do things to – if we had a car object, we could probably fill up the car, start the car, stop the car etc. In this case, the car would be the object, and all the things we could do to the car would be what are called methods. In Javascript, you perform methods on an object by writing the object’s name, followed by a . (full stop, period, whatever you want to call it) and then the method name.
So if we had a car object called ‘car’ which we knew had a ‘fillUp’ method, we would do something like the following:

car.fillUp();

Note that we put some empty brackets after the method name, this is because the method doesn’t take any parameters. Again I’m throwing around another term, which I haven’t taught yet – a parameter is simply a value that we have to pass to the method to make it do it’s job. So if we had a method to change the car’s gears, we might pass it a parameter that specifies what gear to change to – but in this case, we don’t need to pass any parameters.
We then end the line with a semicolon. This is because in Javascript, we tell the browser (or thing that is compiling/running the Javascript) that we’ve finished doing this instruction by using a semicolon (hence, most lines we write in Javascript are going to end with a semicolon).
Note also that a function is like a method (it’s just a named piece of code) however it stands alone (is not performed on an object). So instead of writing object.FunctionName(Any_Parameters_We_Want_To_Pass); we would write something like FunctionName(Any_Parameters_We_Want_To_Pass);
Anyway, enough of that educational tangent – we’ll learn more about functions and methods (and eventually how to create them) in later tutorials!

The point of all that, is that there is a built in method called write that can be performed on the document object which writes HTML to a document. We simply pass this the parameter of what we want it to write (and we specify this in either double or single quotes (note that single quotes are usually used since double quotes are usually used in HTML)). So in the project folder you should have setup from last lesson, let’s just put some Javascript in our script.js file that writes some simple text to the screen (note that we can put HTML in here if we wanted to):

document.write('Hello World! This is being written from the script.js file!');

Note once again that we are ending the line with a semicolon!

Now if you open your index.html file, you should notice that nothing happens. So why is this?
Well it’s because our Javascript is trying to use document.write before the page has actually finished loading properly! This is where the limitations of our basic Javascript knowledge come in (and where libraries such as jQuery are very good for keeping things external). We can solve this by either moving our script include to the body, or by using inline Javascript.
For now, we can just use the method (as in solution, not as in the named piece of code performed on an object!) we covered last lesson to use inline Javascript in the href attribute of a tags:

<a href="javascript: document.write('Hello World! This is being written from the script.js file!');">Click Me</a>

So maybe it’s not the tidiest code in existence, but on clicking the link on the index.html page – “Hello World!” is written, it works!



Back to Javascript