We can do better by fetching an object representing a DOM element and using the innerHTML on that DOM element to changes its content.
In this example we change the DOM, which will change the HTML that appears in the browser.
In order to be able to change a DOM object, first we need to fetch the object. There are plenty of methods to do that, but probably the most simple one is the getElementById method of the document class. In the next snippet the call document.getElementById('display') fetches the object representing the HTML element that has the id display.
One of the attributes of this object is called innerHTML. If we assign a value to it, that will change the content of the appropriate HTML element.
In this example you can see a simple div element (we could have used any element, but divs are sort of neutral and that's why they are used usually) with an id display.
<div id="display"></div> <script> document.getElementById('display').innerHTML = 'Hello World'; </script>Try!
Published on 2015-03-29