We present two different styles to print "Hello World!" for a good reason.
The first style uses the write() method of the document object and this method prints text on the HTML page. This method was a popular method in the past but its use now is discouraged due to the possibility of it erasing all the contents on a page. Therefore, we would not be using document.write() henceforth.
The second method uses getElementById() method of the document object to get a handle of the "div" element of the HTML body. Next, it adds to the innerHTML property of the "div" element. This method is safe and does not erase existing content. In our examples, we will use innerHTML method for printing text on the page.
Note that we will describe the document object, document.write() method, document.getElementById() method, and innerHTML property in a later section. If you feel overwhelmed, please make a note of these methods and once you have read the later sections, these methods would start to make complete sense!
Running the above example is very simple. Simply point the web browser to this location to load this file. Once loaded, the page would display "Hello World!" twice.
The first advantage with this approach is that we can use the same file in multiple HTML pages instead of having to provide the same code in multiple pages; thus, this provides a better code-re-usability.
The third advantage with this approach is that it makes the HTML code less cluttered and thus, easier to read.