[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.52,Default,,0000,0000,0000,,Okay, so far we've been modifying\Na lot of existing elements on the page.
Dialogue: 0,0:00:06.52,0:00:09.91,Default,,0000,0000,0000,,But what if we want to add\Nnew elements to the page?
Dialogue: 0,0:00:09.91,0:00:15.08,Default,,0000,0000,0000,,We could do that with `innerHTML`,\Nwriting the HTML for the tags
Dialogue: 0,0:00:15.08,0:00:18.93,Default,,0000,0000,0000,,inside the string that we\Npass in, like we did here.
Dialogue: 0,0:00:18.93,0:00:22.26,Default,,0000,0000,0000,,That can get a bit messy though,\Nespecially if you want to create
Dialogue: 0,0:00:22.26,0:00:25.54,Default,,0000,0000,0000,,multiple tags with different\Nattributes, styles, and classes.
Dialogue: 0,0:00:25.54,0:00:31.10,Default,,0000,0000,0000,,So instead, we can use a whole suite\Nof sweet document methods
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,for creating new elements from scratch\Nand adding them to the page.
Dialogue: 0,0:00:35.39,0:00:40.68,Default,,0000,0000,0000,,Let's say that we want to add\Nan image of a cat to the page,
Dialogue: 0,0:00:40.68,0:00:44.02,Default,,0000,0000,0000,,because we just don't\Nthink it has enough yet.
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,The first step is to create\Nthat new `` element, right?
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,We want to create that.
Dialogue: 0,0:00:50.79,0:00:55.98,Default,,0000,0000,0000,,So we'll start off by creating\Na variable to store it, `catEl`.
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,And then we're going to use\N`document.createElement`,
Dialogue: 0,0:01:00.94,0:01:06.62,Default,,0000,0000,0000,,and pass in the name of the tag\Nwe're making, `img`.
Dialogue: 0,0:01:06.62,0:01:12.06,Default,,0000,0000,0000,,So now you can imagine that the browser\Nhas made an image tag, like this,
Dialogue: 0,0:01:12.06,0:01:15.07,Default,,0000,0000,0000,,and it's floating off in space somewhere.
Dialogue: 0,0:01:15.07,0:01:19.11,Default,,0000,0000,0000,,The next step is to assign a source to it.
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,So, `catEl.src =`,
Dialogue: 0,0:01:23.31,0:01:29.38,Default,,0000,0000,0000,,and let's just grab our source\Nfrom up here,
Dialogue: 0,0:01:29.38,0:01:34.76,Default,,0000,0000,0000,,and-- oh, we should add an `alt`,\Nto make this image more accessible--
Dialogue: 0,0:01:34.76,0:01:42.08,Default,,0000,0000,0000,,haven't been doing that, and really should\Nalways have `alt` tags` on our images.
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,So now you can imagine that this\N`` tag that we've made
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,has a `src`, and it also has an `alt`,\N"Photo of cute cat".
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,Okay, so this is what we've made\Nusing this JavaScript here.
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,The `` tag that we made\Nis still floating off in space,
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,because we haven't\Ntold the browser where to put it.
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,And there's so many different places\Nin our DOM where it could go.
Dialogue: 0,0:02:15.83,0:02:21.34,Default,,0000,0000,0000,,Let's do the easiest thing, and just\Nmake it show up at the bottom of the page.
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,We can do that by sticking it at the end\Nof the `` tag, so we say:
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,`document.body.appendChild(catEl);`
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,Haha-- there it is!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,It's quite large as well.
Dialogue: 0,0:02:32.71,0:02:34.98,Default,,0000,0000,0000,,Very large cat-- scary.
Dialogue: 0,0:02:34.98,0:02:41.20,Default,,0000,0000,0000,,Now you can call `appendChild` on\Nany existing DOM node in your page,
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,and it will make the passed in element\Nthe final child of that node.
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,This is where it helps to really\Nvisualize the DOM as a tree.
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,The `` tag is a node in that tree,\Nand it has a bunch of children,
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,like `` and ``,
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,and you're adding one more child\Nat the end of its children.
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,So, actually it'd be after the\N`` tag, right here.
Dialogue: 0,0:03:09.07,0:03:13.32,Default,,0000,0000,0000,,Using DOM methods, you should \Ntheoretically be able to append elements
Dialogue: 0,0:03:13.32,0:03:15.53,Default,,0000,0000,0000,,anywhere inside the DOM tree.
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,We just put it in the easiest,\Nmost obvious spot.
Dialogue: 0,0:03:19.45,0:03:22.02,Default,,0000,0000,0000,,Okay, let's do one more example.
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,We used `innerHTML` down here, to put\N`` tags inside the ``s.
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,Instead, we could use `createElement`.
Dialogue: 0,0:03:31.44,0:03:33.16,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:03:39.62,0:03:43.82,Default,,0000,0000,0000,,And I misspelled it,\Nand spelling is very important.
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,So that creates an empty `` tag,\Nfloating off in space.
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,So, first thing we'll do is\Nset the text of it,
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,so, `strongEl.textContent = "cat";`.
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,Alright?
Dialogue: 0,0:03:57.75,0:04:01.82,Default,,0000,0000,0000,,Alternatively, actually, we could\Ndo this other thing where
Dialogue: 0,0:04:01.82,0:04:04.58,Default,,0000,0000,0000,,we create what's known as a `textNode`.
Dialogue: 0,0:04:04.58,0:04:09.32,Default,,0000,0000,0000,,Many DOM nodes in the DOM tree can have\Nspecial types of nodes, `textNode`s,
Dialogue: 0,0:04:09.32,0:04:10.73,Default,,0000,0000,0000,,as their children.
Dialogue: 0,0:04:10.73,0:04:14.100,Default,,0000,0000,0000,,And these nodes aren't elements, but they\Nare still nodes in the DOM tree.
Dialogue: 0,0:04:14.100,0:04:17.54,Default,,0000,0000,0000,,We actually call them\N"leaf nodes", because they're
Dialogue: 0,0:04:17.54,0:04:20.08,Default,,0000,0000,0000,,the very final thing\Nthat can be in a tree.
Dialogue: 0,0:04:20.08,0:04:21.74,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:04:27.55,0:04:31.82,Default,,0000,0000,0000,,And we'll just pass in the text, "cat".
Dialogue: 0,0:04:31.82,0:04:34.50,Default,,0000,0000,0000,,If we use this technique, we've now\N
Dialogue: 0,0:04:34.50,0:04:42.17,Default,,0000,0000,0000,,created two nodes that are floating\Noff in space: a `` tag,
Dialogue: 0,0:04:42.17,0:04:46.55,Default,,0000,0000,0000,,and then this `textNode`, which\Njust says "cat".
Dialogue: 0,0:04:46.55,0:04:49.68,Default,,0000,0000,0000,,And we need to connect them\Nup to each other.
Dialogue: 0,0:04:49.68,0:04:54.91,Default,,0000,0000,0000,,And we want the ``\Nto be the parent of "cat".
Dialogue: 0,0:04:54.91,0:05:03.15,Default,,0000,0000,0000,,So what we'll do is say\N`strongEl.appendChild(strongText);`.
Dialogue: 0,0:05:03.15,0:05:12.11,Default,,0000,0000,0000,,Okay, so now we've got\Nthe ``with "cat" inside,
Dialogue: 0,0:05:12.11,0:05:18.58,Default,,0000,0000,0000,,and we have to append it where we want,\Nbecause it's still floating off in space.
Dialogue: 0,0:05:18.58,0:05:24.53,Default,,0000,0000,0000,,We are inside the `for` loop\Nfor `nameEls`, and each `nameEl`
Dialogue: 0,0:05:24.53,0:05:27.35,Default,,0000,0000,0000,,is where we want to append\Nthe `` tag.
Dialogue: 0,0:05:27.35,0:05:34.98,Default,,0000,0000,0000,,So here,\N`nameEls[i].appendChild(strongEl);`.
Dialogue: 0,0:05:34.98,0:05:42.20,Default,,0000,0000,0000,,A-ha, and now actually we see it twice,\Nbecause I left in the old way.
Dialogue: 0,0:05:42.20,0:05:47.34,Default,,0000,0000,0000,,So it's appending to a `` tag\Nthat already has a `` in it.
Dialogue: 0,0:05:47.34,0:05:52.43,Default,,0000,0000,0000,,We could change this line to\N`innerHTML` equals empty string,
Dialogue: 0,0:05:52.43,0:05:57.82,Default,,0000,0000,0000,,which will effectively clear out the span\Nbefore we append to it.
Dialogue: 0,0:05:57.82,0:06:04.92,Default,,0000,0000,0000,,Now, as you saw, that took way more lines\Nof code than the `innerHTML` version.
Dialogue: 0,0:06:04.92,0:06:06.99,Default,,0000,0000,0000,,So, you know, why did we do it?
Dialogue: 0,0:06:06.99,0:06:11.10,Default,,0000,0000,0000,,Well, you know, a lot of developers\Ndon't like modifying the document this way
Dialogue: 0,0:06:11.10,0:06:13.43,Default,,0000,0000,0000,,because it does take a lot more code.
Dialogue: 0,0:06:13.43,0:06:16.71,Default,,0000,0000,0000,,Most developers actually\Nuse libraries, like jQuery,
Dialogue: 0,0:06:16.71,0:06:21.35,Default,,0000,0000,0000,,to do DOM modification for them,\Nwhich provides functions that
Dialogue: 0,0:06:21.35,0:06:26.87,Default,,0000,0000,0000,,does the same code with a lot less\Nlines of code for you as the developer,
Dialogue: 0,0:06:26.87,0:06:29.31,Default,,0000,0000,0000,,because you're using the\Nlibrary functions instead.
Dialogue: 0,0:06:29.31,0:06:33.37,Default,,0000,0000,0000,,I do kind of like writing my code\Nthis way, because I like that
Dialogue: 0,0:06:33.37,0:06:38.67,Default,,0000,0000,0000,,I can see exactly how I'm modifying\Nthe DOM tree, one line at a time.
Dialogue: 0,0:06:38.67,0:06:43.04,Default,,0000,0000,0000,,And it feels cleaner than shoving\Neverything into a string of innerHTML.\N
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,But maybe you hate it.
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,Either way, now you know it exists.
Dialogue: 0,0:06:47.19,0:06:50.94,Default,,0000,0000,0000,,So you can use it if you need it,\Nand you can understand
Dialogue: 0,0:06:50.94,0:06:55.06,Default,,0000,0000,0000,,what libraries like jQuery are\Nactually doing behind the scenes.