So so far, we've only been working with elements that are already existing on the page within the HTML
and with JavaScript, we can do even more, we can create elements, we can create text nodes, and
we can append those elements to other elements.
So the way that it works is we can use the create element method and this is within JavaScript.
And then taking that element, we can append it to another element by using append child.
There's more information on this at the Mozilla Developer Network.
So they have the syntax to create the element.
So specifying the tag name and you also have an option to add in options as well.
They have a basic example of how we can add a div, so we create the element.
You can also create a text node.
So this is how you can add in text.
You can also use that once you've created the element, you can use the element just as you would with
any other object and adding in the inner content, the text content or the inner HTML if you want to.
And there's also the method to create a text node, which also is a way to add in text within the element.
And once you've created it, what you do is you append it.
So in this case, we're creating a div and then we're creating another element.
So this is just a text node.
We're placing the new content text node inside of the new div and then we're placing the new div insert
before the current div.
So we have an option as well of where we insert the element so we can use append child, we can insert
before and we can add in elements into the page.
So let's try this so it can set up a const name at div document and we're creating an element.
So it's the creating element method.
So we need to specify what we're creating.
We want to create a dip and also console log the element as we're creating it so we can take a closer
look at as it's being created.
And you're going to notice at first we do have the div, but it's not anywhere on the page because we
haven't added to the page yet.
And then this div we've got all the same properties of any element object that we might have selected
so we can update the style property to it.
But we set a background color and we'll set the background color to be blue and when we refresh it.
So now it's got style.
You can set the divide as well and I'll call it new one.
And as we refresh it, you see that element is being built.
So it's just like any other element at this point.
And we can do any of the manipulations that we've seen in the earlier lessons.
So the other thing that we can do is we can do text content to add in some text within there and refresh.
You see that the text gets added in.
So we have an appended to the page yet, but we see the text gets added and now there is another way
to add in additional content as well, and that's using the text node.
So let's set up our text using the document object create text node.
So this allows us to create brand new text that we can place inside of an element and the result will
be the same thing for either one.
So now all we need to do is place it inside.
So we've got our div and we can use append child to append a child into that div.
So using that text inside object and when we refresh it, we've got the text that's been placed within
the div and the same way that we appended the child.
We can also add it to the page where we can select the document body.
So selecting documents and then the body object and then we've got all of the same methods that are
available.
So the same syntax append child and we can append that child.
And you can see when I refresh it, that's been added.
So any one of the updates, the manipulations that we've done before, you can do that as well.
And you can see that it does take place.
I'm also going to do font size to make it much, much bigger.
But we do 45 five picks for the style.
So we always need to include the style.
So that's how we can add it.
We can also select an existing element and add it before or after.
So if we want to, for instance, after the each one, if we want to place it in that slot, we can
select the each one, we can keep it within the each one or we can select it and add it afterwards.
So let's select the each one again using documents and query selector.
There's only one element with each one.
So we select that one.
We also have an option to insert before.
So the syntax is the same and then we've got an option to insert before and we need to select the new
element that we've just created.
So that's that div and then the element that we want to insert it before, which is the each one.
So when we refresh, you see now we've inserted it before the H1 and when we inspect you can see there's
that div that we've created and this is actually going.
Be the same thing as if we append the body because we're going to send it to the body, actually the
body is going to be at the end.
So there is a difference before we append it to the body.
You can see that once it's appended to the body for the HTML, it's right down at the bottom just before
the body closes.
So it takes all of the code and including the script tags.
And when you append child, what it does is it adds that after all of the content inside of the element
that you've selected.
So we do have a challenge for you for this lesson, and that's to create a new element, give it an
idea of test, and then add the content of hello world and then add the my ID element to the page.
You can pause the video, try it out and I'll walk you through the solution coming up.
And the syntax is going to be relatively similar to what we've already worked through.
So let's open up our editor and first we'll create our element.
And the element that we're creating is going to be a div.
You can single code or double code this.
And then once we've got it as an object, we can add to the classes.
So I believe we do have a class of red, so we'll add that into the class list.
We can also assign it an ID and the ID that we're assigning is going to be test.
And then we also can add in some text content into there so we can specify text content and this one
can say Hello World, as well as an earlier example, and then we can console log out our example.
So as we're building it and go into the console, you can see there's that new element that we're creating.
We can also create a text node so we can call it temp text and using documents, create text node.
And then we need to specify the text content that we wanted to add in.
So do Hello World two.
And then we're selecting that element that we've named temp and appending a child and appending the
temp text to it.
We can also console log out temp as well so we can see how it's coming along.
And the other thing, too, to note here as well is because this is an object.
So it's referencing the one instance.
And that's why even though we're Consolmagno temp over here and then we're logging it out again over
here after the manipulation, we still see this update within that object because of the fact that it's
referring to the same instance.
And then lastly, let's select the element.
So using documents and query selector selecting the element with my ID and this is where we need to
upend the child.
So we've got that as an object and now we can append child and the child that we want it to add in is
that newly created element.
So now we see we've added it in over here.
Another thing to note as well.
So once we've got some text content and even if we create text node adding in additional text, it simply
adds it in there.
And if you go and if you look at the source of that element, you can see that the source added them
in in the same format.
So if we wanted to add in even more text content and if we do the text content and after we've added
it in the order does matter.
So that's important to note as well, that we're going to be overriding the existing text even though
we're a pending child.
So if we were to take this and add this in below, we can refresh and you can see now we only get hello
world.
So also keep that in mind that the order does matter when you're applying multiple properties to the
element that you're creating.