Instructor: 0:00 All right, let's go ahead and greet the world. I'm going to start out with a body, and this is going to have a div with the id of root. Then we'll add a script tag that is type module and inside of that script tag, I need access to this div. I'm going to say, root element is document.getElementById('root').

0:24 That will give me an access to the DOM node that the browser creates for this element. Now, I need to create an element using JavaScript and thank you Marty, the money bag, for giving me that nice tip. I'm just going to go ahead and grab that.

0:38 We'll get our element, createElement("div"), and then we'll say, element, textContent is our greeting, "Hello, world." Then our element.className, just for funsies, is container. Then we'll say, root element, append element to get that element on the page. Without this, this element just exists in memory and is not really doing anything useful. We have to actually put that on the page for the user to see it.

1:07 Because our root element is on the page right here, once we append this element to that one, it will be visible to the user. Let's go ahead and save this, and ta-da, there it is. Awesome. We've got our body and you'll notice that the browser actually inserts a couple of these dom nodes for us even though I didn't put an HTML in there.

1:27 The browser sticks the HTML in there for me. There's my root right there and there's my div with the class container and the text content of Hello World. I like to say thank you and good bye to these helpful emoji share and let's review this.

1:43 We made a body with a div with the ID of root and then inside of our script tag, we got access to that div. We created our own div, made some modifications to it to set the text content and the class name, and then appended our element that we created to the root element that the browser created when we handed it, this HTML.

2:05 The benefit of this is it gives us an actual programming language to do all sorts of things in here like we could say new date as the text content. We save that and ta-da, there's the current date as the time I'm recording this video.

2:19 Lots of really cool things we can do now that we're programming our UI using JavaScript rather than using plain old HTML.