Okay, let's talk about appending and prepending HTML.
And so what we're going to do is we're going to select an element.
And then we're going to add some,
some more element or some more text at the back of
it and the front of it inside of that particular element.
So what we've seen before is we could have like an H1 with some text in here.
And we've been able to select that one and then use dot HTML to put more HTML in there.
But let's say we wanted to add
a span at the end or we wanted to add a span at the beginning.
Well, we'd have to pull all of this out stored in a variable,
overwrite that variable with HTML inside of it.
There's actually a better way to do this.
So first things first,
let's go ahead and do a document dot ready function.
And that just allows us to put our jQuery code in here safely.
Let's go ahead and select that h one.
K one is selected.
Now I can use append,
APP END OR prepend.
Append goes to the back,
prepend goes to the front.
So let's do append,
and let's add some HTML in here.
Let's add strong. This is bold.
And that's, again, that's going to select this H1,
and it's just going to append some stuff in here.
So let's go ahead and save our page and refresh.
And you can actually see that when we inspect here h one,
at the end of it, we have HTML,
we have strong, this is bold.
And in fact, that was a bad example because it's hard to see.
Let's do underline. There we go.
This is Bolden is underlined.
Let's make sure that's consistent.
Consistent copywriting there.
So this has some text in here. This is underlined.
We could also select that same H1 and we could do prepend.
And let's do a tally six.
This is italics.
And what this is going to do is put some code at the very beginning.
Code in here.
And that's exactly what it does.
It says this is italics in our H1,
we've got i some text you,
but in our source code, we don't have any of that.
And so now we are dynamically marking up our page just using JavaScript and jQuery.
Now a fun little thing here is if we wanted to,
we could chain these together.
So let's go ahead and put this on
a new line because JavaScript doesn't care about new lines.
And let's go ahead and get rid of this one.
And so we're going to select this one,
and then we're going to append,
then we're going to prepend.
And what this looks like essentially is just this.
We're changing it together.
But we can put these on new lines.
So it just looks a little nicer.
And this will apply both of them together.
So let's right in here and in here, number two,
so that we know this is actually working,
that this isn't just executing the same code from the last example.
So let's refresh our source code and we see that nothing has changed in here.
Our jQuery has changed,
but the actual dom hasn't changed the Document Object Model.
Let's go ahead and refresh the document object model.
We're going to see this is italics number two and this
is underlined number two. And that worked.
And all we did was instead of selecting both of them,
we just selected one.
We use one selector and we reuse it.
So we appended and we prepended.
Now what's cool about chaining here is we could also do 2.txt.
This is changed.
Text, then append, then prepend.
And so some text in here is going to say,
this is change text and it changed all of it for me.
So this one no longer has any of the contents that were original to my page.
Jquery has now overwritten all of it and it has prepended and appended some HTML as well.
What I would like you to do as little fun task is go ahead and give this a shot.
You don't have to worry about the text part.
But go ahead and append some HTML,
prepend some HTML2, any selector of your choice.
And then when you're done that,
chain them together like what I've done.
When you're done that, we're going to look at selecting
an element and then adding some HTML outside of it,
but before and after.
So some here and some here,
because right now prepend and append only work on the inside.
We want to now work on the outside.