Hey, in this lesson, we're going to be doing some inserting and creating some elements, so using
the insert before, it's a method that inserts a node before the reference node as a child of the specified
parent node.
So what that means is that we can insert a node before another node.
So going into the script, we're going to make a selection of an element.
We're actually going to create a brand new element.
So a creator.
Call it div one.
And then using the document to create create elements.
Let's create a div.
So this is a divide that we've created and I'll just like it out into the console so that we can track
the creation process.
So right now it's just a blank div.
It's not sitting anywhere within the HTML yet because we haven't inserted anywhere.
So now we can grab a reference and make a selection of the elements.
So if we want it to select the elements with a class of nested and let's say we want to insert it before
nested one, so let's take our selection and I'll just call it next one.
And using document query selector, we're going to select the element with a class of nested.
And in this case, it's only going to be selecting all of the first elements.
So what's going to happen here is it's going to select the first one with a class of nested and we can
see which one it selects again, going onto the console and doing a console log of next one.
So it's selecting that first element on the page.
Let's make the page a little bit bigger, so zoom in on the page.
So when we make a selection, it's selecting that first element.
So now we've got that first element assigned to an object, next one, and we can retrieve back the
parent node of next one by using some traversing and selecting the parent node.
And we can also take a look at what the gets returned back with the parent element as well.
So it's going to return back to the element and that's going to return back to the node, and in this
case, they're going to be both the same.
So they're going to be referencing that same device that contains all of the nested elements that are
within them.
So now we can insert before and let's set up the parent.
Elements and selecting the parent node, so next one, the parent node, and that's well, we could
also selected by class as well.
That's another option that we have.
And if we want to insert that element that we just created.
So let's go ahead and we're going to insert that element.
So the parent elements and then using the insert before let's select insert div one and then we need
to specify what element it's going to be inserted before.
So let's do the next one.
And selection, so now the Divx is inserted on the page.
And if we go into the device, we see that that new device has been inserted, we don't have any text
within it.
So let's go ahead and create some text and add that in and we'll set the text content.
We could also add it by node and we'll just call it first nested.
So there we see that it's been inserted just before that first div and we've got first nested inserted
there.
So we needed some parameters.
We needed where the parent we needed to identify the parent.
We also needed to identify what we're inserting.
And then also we needed to identify where it's inserted before because we are using the insert before
method.
So we did need all of these parameters.
So this is the referencing node.
So let's also make a selection and we're going to select the second nested element.
So just give these ones different classes and selecting next to.
So what do you think is going to happen if we select nested two and then insert before next to.
So where do you think that this element is going to go?
And I'm also going to apply a style and let's set the color to be red so it stands out a little bit
more.
So let's refresh and if you said that it's going to insert it before nested to, then you're correct.
So that's where it's inserted that once where we've made the selection of nested one and nested two.
And actually, I should update those classes because I've got the nested two and I've got nested one.
So it's a little bit confusing there.
So let's select and update this to two and to three and then now it's going to insert it between one
and two.
So it's refresh and it's inserting the content between one and two.
So there's also insert after.
So let's make a selection of this instead of insert before we're going to do insert after and we're
going to use that same div.
So what do you think is going to happen here?
Where do you think that the first nested element is going to be sitting?
We're inserting it before Nesto and now we're inserting it after Anasta.
So if you said that we're going to throw an error, then you're correct, because insert after is not
actually a function.
But that's OK, because we can actually fix that so we can use actually insert before, but we need
to navigate to the next sibling.
So selecting the element of next to and taking the next sibling value of that.
So it's going to move it over to the next element.
And I'll actually console logout that values or console log so that we can see what that looks like
within the console.
So which one we're moving and navigating to.
And once we do that, then.
We can indeed insert after because now it's moving over to the.
Third item in the list, and that's how you can add in the ability to do insert after using insert before,
so there's no method again for that.
You can also apply different prototypes to those so we can select the element.
And this is going to represent the entire element, setting up an element prototype and let's do an
append before.
So we're going to create a function that's happened before.
So give the function taking in the element and it's going to take the elements and parent node and then
using insert before it's going to take whatever this element is.
And the element that was Pastan.
So taking in the parent and whatever the element that was passed in.
And also let's do a prototype for element, prototype and append after.
So that's if we want these functions, we can always create the prototypes for them.
So this just a quick example of how to create prototypes.
So take the element and move to the parent node and then using the insert before, as we saw that there
is no insert after that.
So we need to create it.
So we'll select the element that we want to insert.
So using this to reference that element that we're inserting is the same as what we're doing with the
div one and then we're selecting the elements and getting its next sibling in order to insert afterwards.
So now we are ready to try the prototypes that we created.
So selecting the elements that we've just created.
So let's select this one, and this has been applied to all of the elements, and then now we can use
append before and append after, so they're available for us and then we need to specify where we're
spending it after.
So we've already got that selected.
And I'm going to create one more element so that we can demo both of them at the same time and I'll
call it second nested, and then this one can have a color of blue and give it to div two and this way.
So just as we appended after, let's append before and using div two up are prototypes so that the top.
And that way they work, so we've apprehended second and first and actually let's swap those around
so that we're spending first and second, so first and second and we'll swap those around.
So two to one.
And that's how you can set up prototypes to append.
Content before and after.
So an upcoming lesson, we're going to look at some more options to append and prepend with JavaScript.