All in that last video we went ahead and saw how you can target a C Ss class.
H-1 you know this could just as easily be a in our own class of like dat copy or we could be targeting
an ID header and knew something like that you get added either way but now we want to actually target
in an area within the page and we can add content to it dynamically.
Well we're going to do is do a replace here so one machine is actually pick up on a lot of its current
code right here.
But I might create a new document and some might call this replace so I'll continue to see some of the
power of acquiring some of the things that you can do and Mahamat gets my ideas of different ways that
you can use a query within your document.
So what I can do is I want to get rid of the one text on here I don't need that but I do want to do
is create a new div class and this is where I have and that each team can see us as background and not
time to really go in and teach you how to do these tags.
So hopefully already understand what those are.
If not again go back and check out some other great classes.
But right now we're going to create this new div and we're to create an area in here and call this text
box.
All right so you get a div ID of text box and then with in there once helps.
I wrote it right Dave Id goes to a text box.
Now I've got this text box area up here and let's do something real quick.
I'm not going to shove a little of a warm ups and copy here.
All right.
It's to that code.
Text whenever and if they said in here.
So if you're familiar with H.M. in the way CSSA works you'll know that this if I were to say this right
now this copy would come into question just save it so we can take a look at it here.
When I grab my new document here this was called replays and you can see that it's got my alarm and
copy in there just as it should.
Not really styling.
I can create any styles for it and I'm just hurling this idea of text box and it's copy to it.
So let's go back to the document up here and within here what I do is create something new here.
I mean it creates something called a variable.
Now again if you're familiar with CSSA should be kind of familiar as bait works the same way as creating
a class or an ID is what we do is but with javascript we call it a variable so Z V-A are to say that
and that is creating a piece of code that we can reuse but we can name we can call it whatever we want
to hear.
So within that sick create because I'm replacing this copy here I must say create a new variable of
say new text.
So anywhere that I put this new tax I can apply some kind of javascript or a query information to it.
So again my variable is in the text and that's me a container for all different information and we add
to it.
And say that new text is equal to where you use a J.A.G. dollar sign right there and open and close
a paragraph open a quote parentheses excuse me that paragraph quotes and in there I must say it's simple
paragraph within here is the string within the variable and that P is going to say what I'm going to
make it say is replace anything within this paragraph within this div area right here.
Now if this were just a regular p this would be allowing me to keep this copy and add but I'm going
to add here but I'll show you kind of what that means in a second.
So we're saying variable new text is equal to.
And Jake we were say this new paragraph tag.
I mean I close it out with a semi-colon turn a couple times and then I say this new text you can see
actually with the lot of each HTML editors actually pick up the fact that you created this new variable
and the light reuse right there.
Some say new paragraph.
And just like what we did a couple of videos ago.
I see a pen.
All right.
What's in there.
I'm going to add some copy that I want to place all this information down here with.
And I can do whatever I want with it I can add what I can add each Tamil text I can say H-1.
I just replaced something and I got to close out that each one tag there.
And what I should be doing is now that it is new text I'm going to append add this H1 tag right here
and should hopefully be getting rid of that here.
Now as of right now I really haven't targeted this area with my queries so I need to do that next.
So I'm going to just replace what kind of currently wrote right here I'm going to go ahead just kind
of the lead that.
And I'll say if I were to rewrite it and have the dollar sign right there and the quotes and now.
Now here's where I want to target the copy just so I have it exactly right.
Make sure I get that camel case upper case B right there.
A text box.
Now a slightly new piece of inquiry here four years after the box MSA HMO Oh that's gonna let me do
is target.
Does each team help with this.
Pete hang up here and I will say I put my variable in there.
What is it going to do.
I'm going to append this new text within this text box Heidi.
All right does that make sense so far.
So you have this text box right down here and MSA within their places new text variable and the should
be it with that something had save NELA.
I'm not deleting this copy in here to get this copy here this lorem ipsum.
This is how it is played before now if I hit refresh now and SWI looks like I forgot to add some I'd
call in there and do not forget to do that actually.
Wrote here you say that comeback.
So I didn't place there so I must have something going on in my document here.
Yeah I'm a big dummy.
You don't put the ID and the pound down there get rid of the pound sign and ashed the ID was text bikes
that looks good looks good save that come back and hit refresh up here.
There you go.
So I just replaced something.
So that becomes very powerful by being able to target certain areas within your page your document and
be able to replace with certain taxes could become be very beneficial when it comes to maybe want to
display certain text on a mobile device as opposed to the desktop or things like that maybe you don't
want to get rid of the actual dogmatize which replace it temporarily other for that uses for it.
So we are just getting started and there's some really cool things ahead here.