[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.72,0:00:06.89,Default,,0000,0000,0000,,We've already used `innerHTML` quite a bit\Nhere, but I want to quickly show you
Dialogue: 0,0:00:06.89,0:00:08.88,Default,,0000,0000,0000,,a little more about it.
Dialogue: 0,0:00:08.88,0:00:14.02,Default,,0000,0000,0000,,First, let's look at our example,\Nright here where we set `innerHTML`.
Dialogue: 0,0:00:14.02,0:00:17.99,Default,,0000,0000,0000,,I've just passed in a string,\N"all about cats".
Dialogue: 0,0:00:17.99,0:00:22.18,Default,,0000,0000,0000,,But, in fact, I could put HTML tags\Ninside that string.
Dialogue: 0,0:00:22.18,0:00:26.56,Default,,0000,0000,0000,,So I could surround "cats"\Nwith `` tags,
Dialogue: 0,0:00:26.56,0:00:29.37,Default,,0000,0000,0000,,and you can see it shows up emphasized.
Dialogue: 0,0:00:29.37,0:00:32.65,Default,,0000,0000,0000,,Or down here, where I\Nchange "dog" to "cat",
Dialogue: 0,0:00:32.65,0:00:36.15,Default,,0000,0000,0000,,I could surround this\Nwith `` tags,
Dialogue: 0,0:00:36.15,0:00:39.01,Default,,0000,0000,0000,,and it shows up strong, bold.
Dialogue: 0,0:00:39.01,0:00:44.15,Default,,0000,0000,0000,,I could even write an `` tag\Ninside here, or put an entire webpage's
Dialogue: 0,0:00:44.15,0:00:47.84,Default,,0000,0000,0000,,HTML in here, if I really wanted.
Dialogue: 0,0:00:47.84,0:00:53.59,Default,,0000,0000,0000,,So that's pretty neat, because it means\Nwe can do a lot with `innerHTML`.
Dialogue: 0,0:00:53.59,0:00:59.07,Default,,0000,0000,0000,,If we're only changing the text, actually,\Nwe don't even need to use `innerHTML`.
Dialogue: 0,0:00:59.07,0:01:03.92,Default,,0000,0000,0000,,We can just use the `textContent`property,\Nand that means that browser
Dialogue: 0,0:01:03.92,0:01:09.13,Default,,0000,0000,0000,,won't interpret what you pass as HTML,\Nand will just render it as plain text.
Dialogue: 0,0:01:09.13,0:01:12.20,Default,,0000,0000,0000,,Notice if I change this to `textContent`,
Dialogue: 0,0:01:12.20,0:01:14.99,Default,,0000,0000,0000,,my brackets show up-- gross!
Dialogue: 0,0:01:14.99,0:01:19.08,Default,,0000,0000,0000,,So, in that case, we're just going to\Nget rid of them, because the browser
Dialogue: 0,0:01:19.08,0:01:22.52,Default,,0000,0000,0000,,refuses to turn them into actual HTML.
Dialogue: 0,0:01:22.52,0:01:27.12,Default,,0000,0000,0000,,So if you do want to just set the text,\Njust use `textContent`.
Dialogue: 0,0:01:27.12,0:01:31.97,Default,,0000,0000,0000,,If you want to pass in some HTML tags,\Nand have them interpreted as HTML,
Dialogue: 0,0:01:31.97,0:01:34.75,Default,,0000,0000,0000,,then use `innerHTML`.
Dialogue: 0,0:01:34.75,0:01:37.97,Default,,0000,0000,0000,,Once you start doing more\Nadvanced DOM manipulation,
Dialogue: 0,0:01:37.97,0:01:42.03,Default,,0000,0000,0000,,you should be more careful about\Nusing `innerHTML` and `textContent`,
Dialogue: 0,0:01:42.03,0:01:44.52,Default,,0000,0000,0000,,because they'll also\Nremove event listeners
Dialogue: 0,0:01:44.52,0:01:46.81,Default,,0000,0000,0000,,that you've attached to the\Nelements inside,
Dialogue: 0,0:01:46.81,0:01:48.59,Default,,0000,0000,0000,,which you'll learn how to do soon.
Dialogue: 0,0:01:48.59,0:01:51.85,Default,,0000,0000,0000,,In the next talk-through, I'll show you\Na more sophisticated way
Dialogue: 0,0:01:51.85,0:01:55.10,Default,,0000,0000,0000,,to insert new elements\Nand text in your page.