In our last lesson, we appended and prepended some HTML to our page in this lesson,
let's go ahead and add some HTML before and after an elements.
So let's give this a div with an id of target.
And there's not going to be anything in here.
Now, I'd like, let's put something in here.
Add HTML before and after this.
And so let's go ahead and because everything in jQuery is basically select or base,
let's select that target.
We can even do div ID target.
Then we can do dot before.
And that's just literally dot before.
And let's put an h3 in here.
Helloworld, This is a title.
And let's do it again.
Let's select a Div selected by its ID,
and then let's do after.
And let's do a paragraph in here.
This is a paragraph.
And so what our pages now we're going to do is it's going to select this element.
And before this element, just before it.
Right in here.
If I could spell any words correctly,
right in here is going to say,
it's going to say hello world, this has a title.
And afterwards it's going to say with some sort of paragraph in here.
This is a paragraph and this one is actually going to be an h3.
So it's going to look something like this.
Now let's go ahead and get rid of that so we don't have that in here.
And delete, delete, delete, save.
Let's view our source code first.
Make sure that it's not actually adding anything in there.
And let's go ahead and refresh this Hello World.
This is a title at HTML before and after this, and this is a paragraph.
And if you don't have your console open or your dev tools, you can right-click.
You can go to Inspect,
opened up the elements tab,
and you can see there's now an H3.
There's the same div that we originally targeted,
and there's a paragraph after it.
Now, just like in the last lesson,
we can, if we wanted to chain these together.
And so we only need to select this once and then we could
say before and after and do these things.
Let's go ahead and save this actually,
let's go ahead and make sure that caching isn't happening.
And we'll just put a number two in there so we know that
this is working the way we expect it to work.
So go ahead and refresh. Hello world.
This is the title number two.
This is a paragraph number two.
And that is how we add HTML before and after an element.
Now what I would like you to do is the same thing.
Just mimic what I've been doing in these videos just to get some hands-on experience.
And again, I can't say this enough is when you're learning to code,
you can watch as many videos as you like.
But nothing is going to compare to actually getting some hands on experience and
being able to write it and to be able to create muscle memory.
So go ahead and give this a shot.
When you are done that, let's head on over to the next lesson,
where we actually select an element from the page and completely deleted.