WEBVTT

00:00:00.921 --> 00:00:06.523
Okay, so far we've been modifying
a lot of existing elements on the page.

00:00:06.523 --> 00:00:09.909
But what if we want to add
new elements to the page?

00:00:09.909 --> 00:00:15.075
We could do that with `innerHTML`,
writing the HTML for the tags

00:00:15.075 --> 00:00:18.926
inside the string that we
pass in, like we did here.

00:00:18.926 --> 00:00:22.258
That can get a bit messy though,
especially if you want to create

00:00:22.258 --> 00:00:25.540
multiple tags with different
attributes, styles, and classes.

00:00:25.540 --> 00:00:31.097
So instead, we can use a whole suite
of sweet document methods

00:00:31.097 --> 00:00:35.393
for creating new elements from scratch
and adding them to the page.

00:00:35.393 --> 00:00:40.685
Let's say that we want to add
an image of a cat to the page,

00:00:40.685 --> 00:00:44.018
because we just don't
think it has enough yet.

00:00:44.018 --> 00:00:48.620
The first step is to create
that new `` element, right?

00:00:48.620 --> 00:00:50.786
We want to create that.

00:00:50.786 --> 00:00:55.980
So we'll start off by creating
a variable to store it, `catEl`.

00:00:55.980 --> 00:01:00.935
And then we're going to use
`document.createElement`,

00:01:00.935 --> 00:01:06.615
and pass in the name of the tag
we're making, `img`.

00:01:06.615 --> 00:01:12.065
So now you can imagine that the browser
has made an image tag, like this,

00:01:12.065 --> 00:01:15.069
and it's floating off in space somewhere.

00:01:15.069 --> 00:01:19.111
The next step is to assign a source to it.

00:01:19.111 --> 00:01:23.308
So, `catEl.src =`,

00:01:23.308 --> 00:01:29.376
and let's just grab our source
from up here,

00:01:29.376 --> 00:01:34.764
and-- oh, we should add an `alt`,
to make this image more accessible--

00:01:34.764 --> 00:01:42.081
haven't been doing that, and really should
always have `alt` tags` on our images.

00:01:42.081 --> 00:01:47.178
So now you can imagine that this
`` tag that we've made

00:01:47.178 --> 00:01:58.144
has a `src`, and it also has an `alt`,
"Photo of cute cat".

00:01:58.144 --> 00:02:04.928
Okay, so this is what we've made
using this JavaScript here.

00:02:04.928 --> 00:02:08.983
The `` tag that we made
is still floating off in space,

00:02:08.983 --> 00:02:11.764
because we haven't
told the browser where to put it.

00:02:11.764 --> 00:02:15.832
And there's so many different places
in our DOM where it could go.

00:02:15.832 --> 00:02:21.342
Let's do the easiest thing, and just
make it show up at the bottom of the page.

00:02:21.342 --> 00:02:26.304
We can do that by sticking it at the end
of the `` tag, so we say:

00:02:26.304 --> 00:02:29.860
`document.body.appendChild(catEl);`

00:02:29.860 --> 00:02:31.197
Haha-- there it is!

00:02:31.197 --> 00:02:32.711
It's quite large as well.

00:02:32.711 --> 00:02:34.979
Very large cat-- scary.

00:02:34.979 --> 00:02:41.198
Now you can call `appendChild` on
any existing DOM node in your page,

00:02:41.198 --> 00:02:47.337
and it will make the passed in element
the final child of that node.

00:02:47.337 --> 00:02:52.115
This is where it helps to really
visualize the DOM as a tree.

00:02:52.115 --> 00:02:57.873
The `` tag is a node in that tree,
and it has a bunch of children,

00:02:57.873 --> 00:03:00.076
like `` and ``,

00:03:00.076 --> 00:03:04.395
and you're adding one more child
at the end of its children.

00:03:04.395 --> 00:03:09.074
So, actually it'd be after the
`` tag, right here.

00:03:09.074 --> 00:03:13.320
Using DOM methods, you should 
theoretically be able to append elements

00:03:13.320 --> 00:03:15.531
anywhere inside the DOM tree.

00:03:15.531 --> 00:03:19.447
We just put it in the easiest,
most obvious spot.

00:03:19.447 --> 00:03:22.016
Okay, let's do one more example.

00:03:22.016 --> 00:03:28.283
We used `innerHTML` down here, to put
`` tags inside the ``s.

00:03:28.283 --> 00:03:31.443
Instead, we could use `createElement`.

00:03:31.443 --> 00:03:33.159
[typing]

00:03:39.622 --> 00:03:43.824
And I misspelled it,
and spelling is very important.

00:03:43.824 --> 00:03:48.663
So that creates an empty `` tag,
floating off in space.

00:03:48.663 --> 00:03:51.879
So, first thing we'll do is
set the text of it,

00:03:51.879 --> 00:03:56.573
so, `strongEl.textContent = "cat";`.

00:03:56.573 --> 00:03:57.746
Alright?

00:03:57.746 --> 00:04:01.816
Alternatively, actually, we could
do this other thing where

00:04:01.816 --> 00:04:04.581
we create what's known as a `textNode`.

00:04:04.581 --> 00:04:09.324
Many DOM nodes in the DOM tree can have
special types of nodes, `textNode`s,

00:04:09.324 --> 00:04:10.726
as their children.

00:04:10.726 --> 00:04:14.998
And these nodes aren't elements, but they
are still nodes in the DOM tree.

00:04:14.998 --> 00:04:17.541
We actually call them
"leaf nodes", because they're

00:04:17.541 --> 00:04:20.077
the very final thing
that can be in a tree.

00:04:20.077 --> 00:04:21.736
[typing]

00:04:27.548 --> 00:04:31.816
And we'll just pass in the text, "cat".

00:04:31.816 --> 00:04:34.496
If we use this technique, we've now


00:04:34.496 --> 00:04:42.169
created two nodes that are floating
off in space: a `` tag,

00:04:42.169 --> 00:04:46.547
and then this `textNode`, which
just says "cat".

00:04:46.547 --> 00:04:49.680
And we need to connect them
up to each other.

00:04:49.680 --> 00:04:54.910
And we want the ``
to be the parent of "cat".

00:04:54.910 --> 00:05:03.152
So what we'll do is say
`strongEl.appendChild(strongText);`.

00:05:03.152 --> 00:05:12.114
Okay, so now we've got
the ``with "cat" inside,

00:05:12.114 --> 00:05:18.582
and we have to append it where we want,
because it's still floating off in space.

00:05:18.582 --> 00:05:24.527
We are inside the `for` loop
for `nameEls`, and each `nameEl`

00:05:24.527 --> 00:05:27.354
is where we want to append
the `` tag.

00:05:27.354 --> 00:05:34.975
So here,
`nameEls[i].appendChild(strongEl);`.

00:05:34.975 --> 00:05:42.195
A-ha, and now actually we see it twice,
because I left in the old way.

00:05:42.195 --> 00:05:47.335
So it's appending to a `` tag
that already has a `` in it.

00:05:47.335 --> 00:05:52.434
We could change this line to
`innerHTML` equals empty string,

00:05:52.434 --> 00:05:57.817
which will effectively clear out the span
before we append to it.

00:05:57.817 --> 00:06:04.925
Now, as you saw, that took way more lines
of code than the `innerHTML` version.

00:06:04.925 --> 00:06:06.991
So, you know, why did we do it?

00:06:06.991 --> 00:06:11.099
Well, you know, a lot of developers
don't like modifying the document this way

00:06:11.099 --> 00:06:13.433
because it does take a lot more code.

00:06:13.433 --> 00:06:16.714
Most developers actually
use libraries, like jQuery,

00:06:16.714 --> 00:06:21.352
to do DOM modification for them,
which provides functions that

00:06:21.352 --> 00:06:26.873
does the same code with a lot less
lines of code for you as the developer,

00:06:26.873 --> 00:06:29.310
because you're using the
library functions instead.

00:06:29.310 --> 00:06:33.366
I do kind of like writing my code
this way, because I like that

00:06:33.366 --> 00:06:38.666
I can see exactly how I'm modifying
the DOM tree, one line at a time.

00:06:38.666 --> 00:06:43.043
And it feels cleaner than shoving
everything into a string of innerHTML.


00:06:43.043 --> 00:06:44.772
But maybe you hate it.

00:06:44.772 --> 00:06:47.188
Either way, now you know it exists.

00:06:47.188 --> 00:06:50.939
So you can use it if you need it,
and you can understand

00:06:50.939 --> 00:06:55.064
what libraries like jQuery are
actually doing behind the scenes.