Let's take a look at how we can dynamically add HTML to a page.
And so for this, we need an example.
Let's give our page a div with a customer ID of custom ID.
And there's not going to be anything in here,
so it's going to be completely empty.
And we know that if we go back to our browser and
we refresh your page, there's going to be nothing in there.
And if we look at our source code,
it just says custom ID. There's nothing in there.
Let's go ahead and add some custom HTML in there.
So in the last couple of lessons,
you saw that we would select this ID with custom ID.
And I'm using the id selector here,
dot txt, text in here.
And so we were using taxed and that's,
that's all, well and good.
But that's not actually going to add any HTML.
So if we wanted to add an H1 and here we can say H1, HelloWorld.
And unfortunately this is not going to do what we expect it to do.
And let's go back to our code here.
It's actually going to print out H1,
HelloWorld eight slash H1.
That's maybe not what we want.
Maybe we want to actually add some,
some proper HTML here.
So if we inspect this, we go into our elements
and screw that up to make that touched smaller.
We can actually see that there is no one element,
it's just plain text.
And so that's not always what we want.
Instead, what we want is to use HTML.
And so how this works is you have a selector,
you do dot HTML opening parentheses,
and then you put your HTML in there.
Whatever that HTML is,
it can be a string like this,
or it could be a variable.
And then you just close it with your closing parentheses.
And the semicolon is optional.
So I'll sometimes use it, sometimes not use it.
Let's go ahead and refresh our page.
And now we see we actually have a proper HelloWorld H1.
And in our document object model in our source code here,
what our browser sees it as,
we have a proper H1.
So what's cool about this is we can now go in here and let's write
a span with a class of custom class,
span, text slash span.
So this is getting a little bit hard to
read just because it's getting to be wrapped on, on multiple lines here.
And because I'm pretty zoomed in with my editor.
But if we refresh,
we are going to see there's a span.
Now we can go ahead and select that span.
Once it's created, we can go ahead and select that span text changed.
And we're gonna see that it goes from span text to change. Just like that.
Now, spacing is a little bit off and this is kind of an ugly example,
but it is a very functional example.
And jQuery isn't about making pages look beautiful.
That's what CSS is for.
Jquery is meant to be a shorter way of writing JavaScript.
So there's a difference between HTML and text.
We learned about HTML in the next lesson.
Let's go ahead and learn about dot text.
What I would like you to do for this particular lesson is go ahead and
select an ID or an element or rather doesn't have to be Beidi could be by class name,
could be just select all the divs on the page,
do dot HTML, and then write some actual HTML in there.
And take note.
You can always right-click inspect,
go to Elements tab.
And you can see that there are actual HTML elements in here.
Once you've done that, let's head on over to the next lesson.