Hello and welcome this lesson, we're going to be setting up our main block area and we're going to
be doing all of this using JavaScript, so creating an indexed HTML page.
This is going to be used to house our script tags and then within the script tags.
This is where all the magic is going to happen and this is where our JavaScript is going to take place.
So first of all, we're going to create a global object.
We can just call it my block so that we can reference it from any one of the functions and then using
document, adding an event listener.
So the event listener that we're listening for and this one is going to be listening for when the DOM
content has loaded.
So the event that we are listening for is dom content loaded.
And what this means is this gets invoked whenever the dorm content has loaded.
So whenever all of your elements are in place, then this is when this fire's off and we can output
within the console ready and try that out.
And you can see that what happens here is almost instantly, because we don't have a lot of HTML, of
course, and it almost instantly loads and we see ready output into the console.
So the next thing we want to do is we want to build the my block object and using JavaScript.
So we're going to attach an element to the page and we create this element dynamically.
So using the my block variable that we set up this a global variable, we're going to get document create
element and the type of element that we're creating is going to be a div.
So when we refresh, we can output in the my block and you can see that now it's got an element inside
of there.
And what we want to do with this element is we want to append it to the HTML so that we can see it and
it's visible and we'll also add in text content into it and we'll type in the world into it temporarily.
And then lastly, what we'll do is add it to the page.
So using the document body object, we're going to send a child to the document body.
And that child that we're spending is going to be the my block object that we just created.
So that's set new, freshly created element that we created.
So you can see that when you do an inspect, you see that we've added in and it's been appended to the
body.
So it's been added in after the script tags because this is the way that the append works.
That adds that after any code that's already existing within the body tags, you could also move this
within the head area.
And that way you're not going to have any script tags there in the body.
Everything will be sitting within the head and the div will be created and added into the body section.
So go ahead and do that and add that into your code, set it up and listen for the event to Dom content
loaded and when it loads create and create a div and then add that div into your body tags and you'd
be ready to move on to the next lesson where we're going to apply some styling.
So we're not just going to have hello.
We'll add in some styling and all using JavaScript.