Video
Now, as much as I know you enjoy writing to the console, we should probably look at doing something in the browser.
So, we are going to create something that can be seen in the browser and then access and change it. The text is in the displayed in the browser is called the DOM (Document Object Model).
How do we do this?
First, create a new page called: dom.html.
Then, put in the following HTML:
<html>
<head>
<title>Accessing the DOM</title>
</head>
<body>
<div id="changeme">Update me</div>
</body>
</html>
Save this file, open it in your favorite browser, and you will see Update me in your browser.
Now, add the following in the head tags:
<script>
document.getElementById("changeme").innerHTML = "I have been changed";
</script>
Did it change for you? Me neither! So, what happened?
Remember, when browsers read HTML pages, they start at the top and read down. As such, the script tag runs, and it tries to find the ID “changeme,” but it doesn’t exist yet.
So, how do we fix this? ** This is me giving you a minute to think on it**
Try moving the script tags and everything in between into the body.
So, it should look like this:
<html>
<head>
<title>Accessing the DOM</title>
</head>
<body>
<div id="changeme">Update me</div>
<script>
document.getElementById("changeme").innerHTML = "I have been changed";
</script>
</body>
</html>