Hey, in this lesson, we're going to be attending and adding elements, first of all, we need to make
a selection of the parent.
So let's select the parent element.
And this is going to be the top div there.
And then we're going to be adding additional elements before and after that.
So top al and make our selection using document and then query selector and selecting the element with
a class of top.
And then the child that we want to add in, so that's going to be CONSED and let we just call this one
div one and then using the documents, we're going to create an element.
And the element that we're creating is going to be a div.
And then within this div div one, let's add in some text content and I'll just call that div one and
then div one style color and assign a color of red to it so that we can see it or insert it on the page.
So let's save that.
And right now it's not going to do a whole lot.
So when we refresh we don't see a whole lot happening.
So let's go back into the code and or check out what the difference between append and append child
is going to be.
So making a selection of the parent and getting the elements and then using append.
So this is going to allow us to append whatever the child is to the page.
And let's refresh.
So what it's happened now is it's added it on the page.
So we look at the elements, it's added it to the end, so simply appended it to the existing content
within the element with a class of top.
Let's also try the same thing and we'll do an append child.
So it's going to be using that hand child.
And in this case, it's going to work the same way because append and append accepts node objects and
dom strings while append child only accepts node objects.
So let's try that one more time and nothing happens because we can't we're still using that same element.
So we haven't moved it or touched it.
Let's recreate and we'll create a second one.
So div and duty of two and we'll make this one Pelloux and just append two.
So you see that everything works properly.
It's just going to add it into the next available spot that is contained within that element with tops
within the parent.
So if we try to select the top element and we want to append just a string value, we're able to do
that.
So if we do a little world, that's going to allow us to upend the content directly to there.
So it allows us to append node so string value.
But if we do an append a child, this isn't going to work.
It's going to throw an error because it's just going to be it only allows for node objects.
So this is a dumb string string value of hello world.
So it's going to throw an error and we're going to the console.
We see that appen child on node parameter is not type of node, so that hello world is not a node and
in order to create it, then we have to create a node for that.
So there are also a few other differences as well.
So with APPEND.
Does not return a value, whereas a pending child does.
So let's create one.
And that vow to assign the values of whatever gets returned, are you going to comment that one, that
one's just throwing an error and then we'll console lock out whatever foul one and Valetta is equal
to so console log and then Valetta will be the second one that we're logging into the output.
Let's refresh and we get undefined.
The first value in twenty is undefined because once again, the append is not returning back, whereas
the append child is going to return back to the value of the pended value.
So Valetta and Div two are going to be essentially equal.
So whenever we select Div two and we've got Val to add a comment to this one because the append doesn't
actually return back a value, you're going to see that this is still referencing that same memory location
that we were looking at.
So you can also add so append allows you to add multiple times while append child only allows you to
add a once.
So with append you're able to add multiple elements on the page.
So let's clear out some space and we've got append.
So if we want it to append that value and we want it to append this one.
So what it's going to do is because we've already created it's just going to move those.
So let's see what happens here with a Pend, so what it happened here is it changed the order of it,
so it took the text and then it did div one and div two.
Because it's still, again, referencing that same memory location and whereas we can't do multiple
items, and even if they are the element divs there, we're still not going to be able to pan them.
So it only allows us to do the one append of that value.
So what it does is it adds the first one, but it's going to ignore the rest of them.
So if I comment that out and if I comment on it and if I comment that out, so that should be the only
one that we're referencing for.
And I do need to.
Common to that value, so let's go back in and it's only going to append the div one, whereas div two
still exists, but using append child, you can't have multiple parameters in there.
So you can only have the one, and that's why it's only appending that one, whereas APPEND allows us
to append multiple items on the page.
So with JavaScript, there's also prepend.
So we showed you what append does.
So let's create another div and this is the one that we're going to prepend.
So let's give it another color so we can see it on the screen.
And I'm going to actually commentate this stuff here and take a look at what we've got now where we're
going to do a prepend.
So same as we were doing at the app.
And we select the parent and then from the parent.
We can run the prepend and there's no prepend child, there's only prepend, and this is the opposite
of append where it allows you to add the elements.
So let's do this three and we'll add that to the end.
So what happened here is it added it actually to the beginning.
So.
So this was in the beginning where Prepend adds up to the beginning and up and adds up to the end.
So if I have div one and let's also do they have two here.
So we're prepared div three and two prepend it and actually let me update this to happen.
So what happened here is that we pretended first, we pretended div three, then we pretended div two
and then we did and append of div one so that it to the end and that's where we got the order of three
to one.