Setting InnerHTML and textContent (Video Version)

We've already used `innerHTML` quite a bit
here, but I want to quickly show you

a little more about it.

First, let's look at our example,
right here where we set `innerHTML`.

I've just passed in a string,
"all about cats".

But, in fact, I could put HTML tags
inside that string.

So I could surround "cats"
with `` tags,

and you can see it shows up emphasized.

Or down here, where I
change "dog" to "cat",

I could surround this
with `` tags,

and it shows up strong, bold.

I could even write an `` tag
inside here, or put an entire webpage's

HTML in here, if I really wanted.

So that's pretty neat, because it means
we can do a lot with `innerHTML`.

If we're only changing the text, actually,
we don't even need to use `innerHTML`.

We can just use the `textContent`property,
and that means that browser

won't interpret what you pass as HTML,
and will just render it as plain text.

Notice if I change this to `textContent`,

my brackets show up-- gross!

So, in that case, we're just going to
get rid of them, because the browser

refuses to turn them into actual HTML.

So if you do want to just set the text,
just use `textContent`.

If you want to pass in some HTML tags,
and have them interpreted as HTML,

then use `innerHTML`.

Once you start doing more
advanced DOM manipulation,

you should be more careful about
using `innerHTML` and `textContent`,

because they'll also
remove event listeners

that you've attached to the
elements inside,

which you'll learn how to do soon.

In the next talk-through, I'll show you
a more sophisticated way

to insert new elements
and text in your page.