1
00:00:00,921 --> 00:00:06,523
Okay, so far we've been modifying
a lot of existing elements on the page.

2
00:00:06,523 --> 00:00:09,909
But what if we want to add
new elements to the page?

3
00:00:09,909 --> 00:00:15,075
We could do that with `innerHTML`,
writing the HTML for the tags

4
00:00:15,075 --> 00:00:18,926
inside the string that we
pass in, like we did here.

5
00:00:18,926 --> 00:00:22,258
That can get a bit messy though,
especially if you want to create

6
00:00:22,258 --> 00:00:25,540
multiple tags with different
attributes, styles, and classes.

7
00:00:25,540 --> 00:00:31,097
So instead, we can use a whole suite
of sweet document methods

8
00:00:31,097 --> 00:00:35,393
for creating new elements from scratch
and adding them to the page.

9
00:00:35,393 --> 00:00:40,685
Let's say that we want to add
an image of a cat to the page,

10
00:00:40,685 --> 00:00:44,018
because we just don't
think it has enough yet.

11
00:00:44,018 --> 00:00:48,620
The first step is to create
that new `` element, right?

12
00:00:48,620 --> 00:00:50,786
We want to create that.

13
00:00:50,786 --> 00:00:55,980
So we'll start off by creating
a variable to store it, `catEl`.

14
00:00:55,980 --> 00:01:00,935
And then we're going to use
`document.createElement`,

15
00:01:00,935 --> 00:01:06,615
and pass in the name of the tag
we're making, `img`.

16
00:01:06,615 --> 00:01:12,065
So now you can imagine that the browser
has made an image tag, like this,

17
00:01:12,065 --> 00:01:15,069
and it's floating off in space somewhere.

18
00:01:15,069 --> 00:01:19,111
The next step is to assign a source to it.

19
00:01:19,111 --> 00:01:23,308
So, `catEl.src =`,

20
00:01:23,308 --> 00:01:29,376
and let's just grab our source
from up here,

21
00:01:29,376 --> 00:01:34,764
and-- oh, we should add an `alt`,
to make this image more accessible--

22
00:01:34,764 --> 00:01:42,081
haven't been doing that, and really should
always have `alt` tags` on our images.

23
00:01:42,081 --> 00:01:47,178
So now you can imagine that this
`` tag that we've made

24
00:01:47,178 --> 00:01:58,144
has a `src`, and it also has an `alt`,
"Photo of cute cat".

25
00:01:58,144 --> 00:02:04,928
Okay, so this is what we've made
using this JavaScript here.

26
00:02:04,928 --> 00:02:08,983
The `` tag that we made
is still floating off in space,

27
00:02:08,983 --> 00:02:11,764
because we haven't
told the browser where to put it.

28
00:02:11,764 --> 00:02:15,832
And there's so many different places
in our DOM where it could go.

29
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.

30
00:02:21,342 --> 00:02:26,304
We can do that by sticking it at the end
of the `` tag, so we say:

31
00:02:26,304 --> 00:02:29,860
`document.body.appendChild(catEl);`

32
00:02:29,860 --> 00:02:31,197
Haha-- there it is!

33
00:02:31,197 --> 00:02:32,711
It's quite large as well.

34
00:02:32,711 --> 00:02:34,979
Very large cat-- scary.

35
00:02:34,979 --> 00:02:41,198
Now you can call `appendChild` on
any existing DOM node in your page,

36
00:02:41,198 --> 00:02:47,337
and it will make the passed in element
the final child of that node.

37
00:02:47,337 --> 00:02:52,115
This is where it helps to really
visualize the DOM as a tree.

38
00:02:52,115 --> 00:02:57,873
The `` tag is a node in that tree,
and it has a bunch of children,

39
00:02:57,873 --> 00:03:00,076
like `` and ``,

40
00:03:00,076 --> 00:03:04,395
and you're adding one more child
at the end of its children.

41
00:03:04,395 --> 00:03:09,074
So, actually it'd be after the
`` tag, right here.

42
00:03:09,074 --> 00:03:13,320
Using DOM methods, you should 
theoretically be able to append elements

43
00:03:13,320 --> 00:03:15,531
anywhere inside the DOM tree.

44
00:03:15,531 --> 00:03:19,447
We just put it in the easiest,
most obvious spot.

45
00:03:19,447 --> 00:03:22,016
Okay, let's do one more example.

46
00:03:22,016 --> 00:03:28,283
We used `innerHTML` down here, to put
`` tags inside the ``s.

47
00:03:28,283 --> 00:03:31,443
Instead, we could use `createElement`.

48
00:03:31,443 --> 00:03:33,159
[typing]

49
00:03:39,622 --> 00:03:43,824
And I misspelled it,
and spelling is very important.

50
00:03:43,824 --> 00:03:48,663
So that creates an empty `` tag,
floating off in space.

51
00:03:48,663 --> 00:03:51,879
So, first thing we'll do is
set the text of it,

52
00:03:51,879 --> 00:03:56,573
so, `strongEl.textContent = "cat";`.

53
00:03:56,573 --> 00:03:57,746
Alright?

54
00:03:57,746 --> 00:04:01,816
Alternatively, actually, we could
do this other thing where

55
00:04:01,816 --> 00:04:04,581
we create what's known as a `textNode`.

56
00:04:04,581 --> 00:04:09,324
Many DOM nodes in the DOM tree can have
special types of nodes, `textNode`s,

57
00:04:09,324 --> 00:04:10,726
as their children.

58
00:04:10,726 --> 00:04:14,998
And these nodes aren't elements, but they
are still nodes in the DOM tree.

59
00:04:14,998 --> 00:04:17,541
We actually call them
"leaf nodes", because they're

60
00:04:17,541 --> 00:04:20,077
the very final thing
that can be in a tree.

61
00:04:20,077 --> 00:04:21,736
[typing]

62
00:04:27,548 --> 00:04:31,816
And we'll just pass in the text, "cat".

63
00:04:31,816 --> 00:04:34,496
If we use this technique, we've now


64
00:04:34,496 --> 00:04:42,169
created two nodes that are floating
off in space: a `` tag,

65
00:04:42,169 --> 00:04:46,547
and then this `textNode`, which
just says "cat".

66
00:04:46,547 --> 00:04:49,680
And we need to connect them
up to each other.

67
00:04:49,680 --> 00:04:54,910
And we want the ``
to be the parent of "cat".

68
00:04:54,910 --> 00:05:03,152
So what we'll do is say
`strongEl.appendChild(strongText);`.

69
00:05:03,152 --> 00:05:12,114
Okay, so now we've got
the ``with "cat" inside,

70
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.

71
00:05:18,582 --> 00:05:24,527
We are inside the `for` loop
for `nameEls`, and each `nameEl`

72
00:05:24,527 --> 00:05:27,354
is where we want to append
the `` tag.

73
00:05:27,354 --> 00:05:34,975
So here,
`nameEls[i].appendChild(strongEl);`.

74
00:05:34,975 --> 00:05:42,195
A-ha, and now actually we see it twice,
because I left in the old way.

75
00:05:42,195 --> 00:05:47,335
So it's appending to a `` tag
that already has a `` in it.

76
00:05:47,335 --> 00:05:52,434
We could change this line to
`innerHTML` equals empty string,

77
00:05:52,434 --> 00:05:57,817
which will effectively clear out the span
before we append to it.

78
00:05:57,817 --> 00:06:04,925
Now, as you saw, that took way more lines
of code than the `innerHTML` version.

79
00:06:04,925 --> 00:06:06,991
So, you know, why did we do it?

80
00:06:06,991 --> 00:06:11,099
Well, you know, a lot of developers
don't like modifying the document this way

81
00:06:11,099 --> 00:06:13,433
because it does take a lot more code.

82
00:06:13,433 --> 00:06:16,714
Most developers actually
use libraries, like jQuery,

83
00:06:16,714 --> 00:06:21,352
to do DOM modification for them,
which provides functions that

84
00:06:21,352 --> 00:06:26,873
does the same code with a lot less
lines of code for you as the developer,

85
00:06:26,873 --> 00:06:29,310
because you're using the
library functions instead.

86
00:06:29,310 --> 00:06:33,366
I do kind of like writing my code
this way, because I like that

87
00:06:33,366 --> 00:06:38,666
I can see exactly how I'm modifying
the DOM tree, one line at a time.

88
00:06:38,666 --> 00:06:43,043
And it feels cleaner than shoving
everything into a string of innerHTML.


89
00:06:43,043 --> 00:06:44,772
But maybe you hate it.

90
00:06:44,772 --> 00:06:47,188
Either way, now you know it exists.

91
00:06:47,188 --> 00:06:50,939
So you can use it if you need it,
and you can understand

92
00:06:50,939 --> 00:06:55,064
what libraries like jQuery are
actually doing behind the scenes.