00:00 Let's get started by writing HTML right here. Inside of that, we'll add a body with a div that has the ID of root, and we'll close that up. Then inside of the body, we also want to have a script tag. So we'll add a script with the type is module.

00:18 Our coding assistant here is going to say, hey, you want to do a source of index.js. We could totally do that. We could create a file, stick it in index.js. We're going to actually just stick everything directly in the root here. So let's follow these instructions. So these instructions are intended to be

00:37 handled in JavaScript using the DOM APIs. So first, we're going to need to get our root element. So we're trying to retrieve this element. Actually, if we save the page right here and pop this open, then you'll notice we actually do have HTML. We have head. Where did head come from?

00:55 Well, that's actually added for us by the browser. Then we have body. If I right-click and say View Page Source, you'll notice that we're just getting HTML body div script. There's no head in here. So the server is actually sending the basic HTML document we've got,

01:13 but the browser will create a head for us automatically. In fact, it actually creates a HTML for us as well, even a body. Let's do this right here, refresh. So we get the HTML, we get the head, we get the body, and then all the contents of our document appear in there.

01:33 But just to keep things a little bit more semantically correct, we'll at least add the HTML and the body here. Okay, great. So with that now, inside of the body, we've got our ID div of root and our script type module. So what we need to do is retrieve this div.

01:52 Let's pull this up a bit. We'll bring up the console here, and I'm going to look for that div. If I say document.getElementByID root, now I have access to that root.

02:10 So we're going to do that in our code right here, and that's going to be our root element. You could call it element if you would like. And with that now, we can append something to the root element. So I could say root element text content is hello world,

02:30 and that actually would solve for our initial objective here. We're getting hello world on the page, but we want to do a little bit more with the DOM. So here, let's follow these instructions as we go. We're going to create a div with a JavaScript DOM API using document.createElement. So here's our element.

02:48 It's going to be document.createElement. That's a div. And then with that, we also want to add a class name, just for the fun of it, just to kind of see what the experience is like. So we say element.className. And you'll notice, actually, we've got TypeScript helping us here. There's also a class list.

03:06 So feel free to dive into that a little bit. That is a more powerful object that has methods on it that you can use to manipulate the class name. But we'll just say class name here. We'll give it container as our class name. And that takes care of that. Then we're going to add our text content for the element.

03:26 So here, we'll just swap these, the element text content. We'll capitalize the H and the W so that we can have hello world. And if we save this and refresh the page here, we're going to see we don't have anything on the page. And the reason is because we may have accessed the root element

03:45 and we may have created an element and mutated it, but that element isn't on the page until we add it. So this is part of the imperative nature of working with the DOM, is that you have to tell it, give it instructions for every little thing that you want it to do. And just because we created an element in memory and we have a variable for that element,

04:04 it doesn't mean it's actually on the page yet. So we need to add it to the page by either adding, well, really the only way you do this is by adding it to an element that's already on the page. Typically, you're going to add it to something like an element with the ID of root or something, some element that's already on the page there.

04:23 So we'll say root element append element, and that will get our hello world on the page. So now if we look at the results here, we've got our div ID of root, we created that with HTML, but then this whole element and everything, every part of it was created solely

04:40 with the JavaScript APIs for the DOM. And it was appended to this root element using the root element append API. And that is your hello world in HTML.