Creating elements from scratch (Video Version)

Okay, so far we've been modifying
a lot of existing elements on the page.

But what if we want to add
new elements to the page?

We could do that with `innerHTML`,
writing the HTML for the tags

inside the string that we
pass in, like we did here.

That can get a bit messy though,
especially if you want to create

multiple tags with different
attributes, styles, and classes.

So instead, we can use a whole suite
of sweet document methods

for creating new elements from scratch
and adding them to the page.

Let's say that we want to add
an image of a cat to the page,

because we just don't
think it has enough yet.

The first step is to create
that new `` element, right?

We want to create that.

So we'll start off by creating
a variable to store it, `catEl`.

And then we're going to use
`document.createElement`,

and pass in the name of the tag
we're making, `img`.

So now you can imagine that the browser
has made an image tag, like this,

and it's floating off in space somewhere.

The next step is to assign a source to it.

So, `catEl.src =`,

and let's just grab our source
from up here,

and-- oh, we should add an `alt`,
to make this image more accessible--

haven't been doing that, and really should
always have `alt` tags` on our images.

So now you can imagine that this
`` tag that we've made

has a `src`, and it also has an `alt`,
"Photo of cute cat".

Okay, so this is what we've made
using this JavaScript here.

The `` tag that we made
is still floating off in space,

because we haven't
told the browser where to put it.

And there's so many different places
in our DOM where it could go.

Let's do the easiest thing, and just
make it show up at the bottom of the page.

We can do that by sticking it at the end
of the `` tag, so we say:

`document.body.appendChild(catEl);`

Haha-- there it is!

It's quite large as well.

Very large cat-- scary.

Now you can call `appendChild` on
any existing DOM node in your page,

and it will make the passed in element
the final child of that node.

This is where it helps to really
visualize the DOM as a tree.

The `` tag is a node in that tree,
and it has a bunch of children,

like `` and ``,

and you're adding one more child
at the end of its children.

So, actually it'd be after the
`` tag, right here.

Using DOM methods, you should
theoretically be able to append elements

anywhere inside the DOM tree.

We just put it in the easiest,
most obvious spot.

Okay, let's do one more example.

We used `innerHTML` down here, to put
`` tags inside the ``s.

Instead, we could use `createElement`.

[typing]

And I misspelled it,
and spelling is very important.

So that creates an empty `` tag,
floating off in space.

So, first thing we'll do is
set the text of it,

so, `strongEl.textContent = "cat";`.

Alright?

Alternatively, actually, we could
do this other thing where

we create what's known as a `textNode`.

Many DOM nodes in the DOM tree can have
special types of nodes, `textNode`s,

as their children.

And these nodes aren't elements, but they
are still nodes in the DOM tree.

We actually call them
"leaf nodes", because they're

the very final thing
that can be in a tree.

[typing]

And we'll just pass in the text, "cat".

If we use this technique, we've now

created two nodes that are floating
off in space: a `` tag,

and then this `textNode`, which
just says "cat".

And we need to connect them
up to each other.

And we want the ``
to be the parent of "cat".

So what we'll do is say
`strongEl.appendChild(strongText);`.

Okay, so now we've got
the ``with "cat" inside,

and we have to append it where we want,
because it's still floating off in space.

We are inside the `for` loop
for `nameEls`, and each `nameEl`

is where we want to append
the `` tag.

So here,
`nameEls[i].appendChild(strongEl);`.

A-ha, and now actually we see it twice,
because I left in the old way.

So it's appending to a `` tag
that already has a `` in it.

We could change this line to
`innerHTML` equals empty string,

which will effectively clear out the span
before we append to it.

Now, as you saw, that took way more lines
of code than the `innerHTML` version.

So, you know, why did we do it?

Well, you know, a lot of developers
don't like modifying the document this way

because it does take a lot more code.

Most developers actually
use libraries, like jQuery,

to do DOM modification for them,
which provides functions that

does the same code with a lot less
lines of code for you as the developer,

because you're using the
library functions instead.

I do kind of like writing my code
this way, because I like that

I can see exactly how I'm modifying
the DOM tree, one line at a time.

And it feels cleaner than shoving
everything into a string of innerHTML.

But maybe you hate it.

Either way, now you know it exists.

So you can use it if you need it,
and you can understand

what libraries like jQuery are
actually doing behind the scenes.