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.