All right.
Welcome back.
So this is a great video we're going to talk about adding new age to our content.
This is a fun part of Jake Query.
So let's go to our HD docs shortcut.
Let's go to learn eventually query right click to New Folder 0 4 and we're gonna type in add new each
to metal content.
OK.
Clues that go to Sublime.
We're going to right click on add new each to more content to index that each team will control and
control us main Di J.S. go to the set up J query file control a control C control W to close that tab
paste it in here and then we're gonna go to the main dot J.S. and paste that in here that way we can
test to make sure everything is communicating properly so let's go to the index on each email file right
click open in the browser inspect counseled out log there it is connected.
Beautiful from a close that.
And now we're gonna get to the fun part.
So you can add several new elements with append and prepared methods in both examples.
I'm going to show you how you can add content with these methods.
OK so let's go and let's build this out real quick.
So what I want to do is I want to return a couple times here and I'm going to do a p tag
this is text.
And then next we're going to build a button and we're going to have a click event.
So we're going to click append text and that's the method that we're calling OK.
And then append text and then we'll close that with the button.
Now when we go into the main J S file we're going to delete the council that log save that and we're
going to do.
Function without the bracket function append text.
OK.
And then we're going to curly brace and inside of there we're going to do var text t t one equals the
paragraph current and text for the period and then we're going to close that with a p tag.
So what we're doing here is we're creating this is gonna be the new element that we create in the on
the page itself.
So variable the next variable is we're going to do var text 2 and we're gonna do equals.
And it will be the dollar sign.
OK.
And we're gonna do the paragraph again.
So do the paragraph tag open and closed and we're gonna do dot text and it's gonna equal text and then
a space OK.
And then we're gonna close that and we have to close this one too.
Because otherwise it won't work and we'll have a whole bunch of errors which we don't want.
So also I'm going to come at this hour we're gonna put on create text with each Tim.
All right.
And then this one is gonna be create text
with J query.
OK next we're gonna do variable 3
Sorry and a variable 3 text 3 getting ahead of myself here.
We're going to do document create element.
Mark please hurry up and we're gonna pull out the element of the p tag OK then we're gonna do t x t
three dot enter each demo equals text
right.
We'll do that.
And then I'm going to come at this hour.
So this is to create text with the DOM.
OK then we're going to do dollar sign.
Body.
So we gonna put us in the body the body tag and we're going to append where the text he won committee
x t to combat he X T three and we'll close that
append
new
OK.
So now what I'm going to do is I'm going to go to index that age aged him all right click open the browser
and when I click this it's going to add text every single time so that is the set content method.
And like I said what it does is it gives you the ability to add content.
Now you obviously entered the content in here but this is a great foundation to understand how to build
like a to do list or a functionality that you want to have where you can add and subtract stuff between
this and the get content method and the site content method.
They're both very good in that regard.
So the other thing that we're gonna talk about real quick is the J query after and before methods.
So what this will do is this will give you the ability to add before or after a element and each element.
And in this example it's just going to be the bold tag with before and after with an italic tag.
OK.
So that you understand how you can do it because that way you can add things wherever you want.
So what we're gonna do is we're going to comment out these two lines.
OK.
Same with the javascript I want to comment on all this.
That way we can comment that up that way I can write a fresh line of code and everything will work appropriately.
So let's go below here and we're going to write in let's see here.
Let's do the button 90 B10 1 and I'm going to do insert before that I want to close that there were
undo button I.D. PETN to insert after.
OK.
And then once you go to Firefox for me you go to Google dot com and we're going to right click on the
image that they have here we're going to copy the image location and close that out and we're going
to do an image tag.
So I am G and will do s our C paste that n the altar is gonna be J query the width is gonna be one hundred
and the height is gonna be one hundred and forty OK.
And then we're gonna add two break tags
OK and I'll right click open the browser just you can see how that looks and you can see the logos all
crunched which is OK.
For this example that's fine because I want to make it smaller so that you can see what we're doing.
So let's go to the javascript file and we're gonna write out the document dot ready function and we're
gonna do the bracket and we're gonna do dollar sign and we're gonna call the button with the I.D. of
B10 1 and click.
So when I click will call a function and we're gonna do image I am G top before and when we do that
we're gonna add the bolt tag.
So we'll do it before.
So whenever I click that this is what's going to return.
OK.
So we'll do that.
There we go.
Close that close that.
And then right below we're of the same things we're going to do dollar sign.
And then the idea of button B10 to tack click where the function
and we'll do this right here and then we're going to return the image.
So it's calling the image tag again after so after the image we're going to do the italic tag.
So it'll be after.
And so what this is going to do is if I click the after button then it's going to show the content after
instead of before.
OK so now if I go to the index that each time I'll file right click and open in the browser and I click
after I get a whole bunch of afters.
If I do before I do before is and what it's doing is it's pushing the image tag over.
So if I refresh us and I just do one before and one after.
There you go.
So that's the ad New Age to male content.
So thanks for watching.
I'll see in the next video.