Welcome back.
In this video we're going to pick up where we left off.
We're going to keep talking about some other ways of manipulating elements.
Remember we select them and then manipulate and so far we've seen how we can change the color or any
style properties and also how we can use the class list to affect styling as well.
So in this video we're going to talk about two different properties both of which allow us to change
the text or the aged him out on a page.
So if I wanted to change the content instead of an H1 tag or instead of a strong tag like I have here
or for I wanted change anchor tag the text itself.
That's what we're going to see how to do in this video.
So the first property is something called text content.
As you can see here I've a paragraph with some text and a strong tag that says Awesome.
And then the rest of the paragraph text.
So if I select this with document Duckery selector P I save that to a variable and I do tag dot text
content that will retrieve the text inside of that each time element and text is defined as anything
between HTML tags but not including the tax.
So you'll see it returns.
This is an awesome paragraph.
It doesn't contain the strong tags so it just extracts all the text from inside of that paragraph.
However many layers deep it needs to go.
It grabs all the text and returns one big string.
And of course we can also set text content like I did here tag text content equals blah blah blah.
And that will reset the text content to be blah blah blah.
Inside of this paragraph.
Ok so I'm going to go ahead and demonstrate how we can use the text content property before we do that
.
I'm going to update our sample demo Tim Page with just a few more lines of markup so that we have some
more text to work with.
So I'm going to add a UL and inside this you will going to add let's do flowers.
So orchids.
Let's do succulence and last the tulips.
OK.
We're going to go ahead and work with this.
In the javascript console.
So here's our page here's our well with our three allies and then we also have this paragraph that has
the strong tag around the word super corgi mixes are super adorable as you can see.
Yes they are.
So I'm going to go to the consul and let's start by just selecting this paragraph far P equals document
.
And my first instinct is always to use query selector because it's so easy.
But I'm not going to do that.
Just that we use another way just get more practice.
I'm going to use GET elements by tag name and that tag name is paragraph and then remember we still
have to ask for the first one.
So now if we look at P we have that paragraph and if we run text content on that of text content it
tells us corgi mixes are super adorable.
So it takes all the text inside there.
Let's do the same thing on the UL so that select the UL var UL and this time I will use queery selector
ul.
Let's look at the UL.
Make sure we have the correct one.
Definitely the right one.
And let's do teks content on that.
And you can see it gets rid of the tags and it just gets the pure text content inside of that UL and
then what we can do is also update that.
So this is a little bit dangerous actually because let's say I want to update what this paragraph text
content is and I want to update it to say corgi mixes are really really super adorable.
Well I could do p text content equals and then say corgi mixes are really really super adorable but
hopefully you can see the problem.
I'm going to get rid of this strong tag here.
If I hit enter just completely overwrites it.
So if we expect this element now we've just gotten rid of whatever was inside there which was a strong
take.
So text content is a little bit dangerous in that sense if you're using it to set something it's not
bad but you just have to be careful about it.
You need to know exactly what's inside of an element.
If there is H.T. email tags that you want to preserve you don't want to just automatically set all of
text content to be a news stream because that will erase everything.
There's another property that works along the same lines as text content except it actually keeps the
two male elements intact so it doesn't just extract the text.
It actually maintains the structure with a correct each time.
Elements returned as well as the text so that property is called Inner HMO.
So we have our same paragraph.
This is an awesome paragraph with strong tags around it around awesome.
And then we select it with query selector and then we run tag dot inner h m l and that gives me this
is an awesome paragraph while keeping the strong tag there.
So I'll show you another example and refresh the page so that we have our strong tag back here and I'm
going to go ahead and select the paragraph again.
Document doc query selector paragraph and we're going to run.
Let's just review text content first and then let's do it for him.
And you can see we get the strong tag returned to us as well.
Let's do the same thing for the UL and the lies that are inside of it.
So var UL equals document doc query selector.
You will and then you'll that inner h t m l and we get the tags as well.
So this is useful and we'll see a few situations where we're going to take advantage of it in some of
the projects that we built.
Text is also useful if we're just changing what's inside of a tag.
So usually we don't actually set inner h him out to be something because it's the same problem that
we would have with setting the text content it just overwrites whatever is currently inside of enraged
him.
So I'll show you that if I say UL dot inner HTML is now equal to plants are awesome.
It just completely overrides it just like it did for text content.
So if we want to add new elements or we want to interact with HTML there are other ways of doing that
.
But if all that we want to do for instance is change this title.
Welcome to my Dom demo.
You could select that first.
It's an H-1.
And you notice there is no H him out inside of it.
It's just an H-1.
So we could use either text content or energy M-L doesn't matter.
But most people would use text content because that's all that is text content.
And we could reset it to be something else.
So that would just be a matter of document get let's do query selector again and I'm not going to save
it to a variable just so that you get used to seeing this document selector H-1 and then we can chain
on at the end dot text content equals and of this lesson.
And you can see my changes reflected appear.
So to recap text content enter HD M-L two different ways of grabbing the content of a given element
we select it first then we run it enraged him.
Or text content on that selected element text content will extract only the text and return a big string
full of text and enraged him Mel will give us everything as a string including the edged him out elements
.
So here's a little bonus at the end.
This is not something that I expect you to remember but there is another difference between enraged
HTML and text content and I'll illustrate that here.
Let's let's try something like this document dump body which gives us the whole body datt inner HMO
.
And you can see if we get all the HTML for the body everything we can do the same thing with entered
to or with text content like this and we get all of the text on our page which is just these three lines
.
What I can do though is if I wanted to change I wanted to get rid of everything on this page which is
not really a good idea but if I wanted to and I wanted to replace it with a new H-1 and that H-1 just
said goodbye to do that I could do something like this document up bodycam text content equals and I
could put in an H-1 tag in here and do something like this where I'm writing HMO.
And if I hit enter.
Oh no it actually doesn't work.
So text content is not going to treat the string as HMO.
It treats it purely as text so it doesn't render the H-1 tag versus if I did the same thing with enraged
him.
In her HMO.
You can see it actually renders it as an H-1.
So that's a nuance but important difference text content treats whatever it gives you and whatever you
give it as just text and inner him out.
I actually treat it like H M L and rendered on the page if you give it tags to render