JavaScript: Writing HTML in JS

In this tutorial we will learn about writing HTML using JavaScript. The way we're going to do this is by using the 'write' method on the 'document' object. Before we go any further, let me explain what that means: An object is a term in Object Oriented Programming, and essentially resembles what an object is in real life - it is 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, and so on. In that example, the car would be the object, and all the things we could do to the car (filling it up, starting it, etc.) 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 'start' method, we would do something like the following:

car.start();

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 to start the car as the method knows what to do without any input.

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 an instruction by using a semicolon, hence most lines we write in JavaScript are going to end with a semicolon. Note also that a function (like alert) 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 calling a function like object.FunctionName(Any_Parameters_We_Want_To_Pass);, we would instead use something more like FunctionName(Any_Parameters_We_Want_To_Pass);. But 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 pre-defined document object which writes HTML to the current document. The 'document' object actually has a whole load of pre-set methods and the 'document' object basically provides access to all the HTML elements on a page.

To the 'write' method we simply need to pass the parameter of what we want it to write, and we specify this message in either double or single quotes to show that it's a bunch of letters joined together to create a type of data called a 'string' (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 (we can put HTML the string we're writing in here if we wanted to, but in this example we're not):

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 to tell whatever is reading our JavaScript when we've finished doing this whole document.write thing.

Now if you open your index.html file in a web browser, 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, and hence before the 'document' object is ready for usage! This is where the limitations of our basic JavaScript knowledge come in (and where libraries such as jQuery are very good for keeping things easy). For now, we can solve this by either moving our script include to the body, or by using inline JavaScript. We can easily utilize one method (as in solution, not as in the named piece of code performed on an object!) of inline JavaScript by using javascript: in the href attribute of an a element:

<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 tidy external JavaScript that we were hoping for (for the time being), but on clicking the link on the index.html page, "Hello World!" is written to our page - it works!