Then inside the script tag I will set up variable, date, set it to new date, and then grab document, body, inner, HTML equals, and I'll set up each one. Today is plus dates plus closed h1 element. Save index.HTML and open it in any browser, and you'll see the heading at the top here.
Today is, and then the date. If you look in the element inspector, you can see that inside the body element we have an h1 with the correct text. Now to show you I'm not cheating, I can also open this page by viewing the page source. And in the page source you'll see here we have the exact same code you saw in my editor. The body element is empty, the only thing we have here is a script, that injects some HTML inside the inner HTML of the body after the script runs. Alright, so this works fine.
But what happens if I grab the script element and all of its contents, cut it out, and place it inside the head? Before I do this, make an educated guess. Will the h1 appear on the page or not? Made your decision? Alright, let's test it. Back in the browser I just reload the page. And nothing happens, well nothing happens in the viewport. But if we look down at the developer tools, we can see here on the right hand side there is an error.
And if we look in the console, it tells us uncaught tight error, cannot set property, enter HTML of nul. So what's happening here? Well if we think like a browser it's pretty obvious. The browser gets the HTML document and reads it from the top. So it says okay, here's an HTML element and inside we have a head, here's some meta content and the title and then we have a script. Alright, let's run the script. And then it gets to this document, body, inner HTML and says I can find the document cause that's what I'm working in now, but I have no idea where this body element is.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality