Add DOM elements

- Adding new DOM elements to the document can technically be done using a combination of the inner HTML and outer HTML properties. But these are really crude tools for the job. Let's say for example you have an image wrapped in a figure element and you want to add a figcaption to that figure element to describe the image. Using inner and outer HTML, we'd have to retrieve the inner HTML of the figure. Then add our figcaption HTML to it. And inject it back into the figure. All this would have to be done in plain text. Any wrong move here, and the HTML breaks.

A better way of adding new DOM elements is by breaking them into their individual components and adding them to the DOM tree. First create the element itself. Then create the Text Node that goes inside the element. Add the Text Node to the element. And finally, add the element to the DOM tree. This makes for a cleaner and more versatile JavaScript and avoids potential disasters like accidentally erasing all the texts in an element or breaking the HTML of the entire document. To do this we need three new methods.

Create element to create the element. Create Text Node to create the next node holding the content inside the element. And, appendChild prefers to place the Text Node inside the element, and then place the new element inside where it needs to go in the DOM tree. Let's put all of this together in an example. In the exercise files for this movie 05-06. There's a new document called Moonwalk.HTML. Containing an image, you can see it right here at the top.

Right now, the image elements sits inside a figure element. And it has an Alt attribute with a text I want to display inside the fig caption. Using what we've learned so far in this Chapter, plus these new methods, we're going to create a new fig caption element. Populated with the contents of the Alt attribute. Add the figcaption element to the end of the figure element. And clear the Alt attribute, so we don't repeat the same content twice. All of this is done in script.js. And I start off by setting up two constants.

One for the figure. And one for the image inside the figure. You'll notice here, I'm using the featured constant as my reference for the query selector for the image. This is a great way of burrowing into DOM elements without having to traverse the entire DOM tree every time.

So you'll often see this nesting of elements within elements and query selectors use to find elements inside elements. Now that we have the pieces we want to work with. The next step is to get the image Alt attribute and we use Get Attribute to do that. I'll place it inside a variable, called Alt text. Set that to THEIMAGE.getAttribute. And here we are looking for the Alt attribute. Now I can create the figcaption element and place that in a variable.

Here we grab the document. Then create, element. And in this case, it's a fig caption. This creates a fig caption document that is not placed anywhere in the document. It's just sitting in the memory of the browser. Then we create a Text Node to hold our Alt text and place that in a new variable.

And here I populated with the Alt text variable. And then we can open this caption Text Node inside the caption element. At this point, it's a good idea to console log out caption element, just to make sure everything is working the way we want it to.

And if everything works correctly, we should now be able to open the console and immediately see the fig caption console logged out. So here we have the fig caption with the text from the Alt attribute. That means everything is working properly. And we only have two things left to do. The first is to append our new fig caption to the featured image figure. We do that the same way as we did with the caption element. So I say featured. That is the figure element. Then, appendChild. And here, the child is caption element.

And then finally, I'll grab the image. Set attribute Alt to nothing. This just blanks out the Alt attributes, so we're not repeating the text twice for screen readers. Save everything. Go back in the Browser. Go to elements and select this image. And now you'll see we have the structure we want. A figure with an image and an empty Alt attribute followed by the fig caption and a text from the Alt attribute. If we look at the page itself, you can also see the figcaption how it appears down here directly below the image.

Watching this, there's a good chance you're thinking this procedure of using the create element and the create Text Node an appendChild methods works. But seems a bit clunky. That's true. But, it does work across old browsers. There is however a new method which is not yet supported by old browsers, that simplifies this procedure significantly. It's called Simply Append and will append any string to a specified apparent node. Using the append method, we can replace some of this functionality here and particularly get rid of this create Text Node component.

And the two appendChild components. So, if I remove this. And instead say, caption element. Then, append. And here we are just going to append alt text. This automatically replaces alt text inside the fig caption as a Text Node. And then we grab feature and append caption element. Save that. Back in the browser. And you see everything is exactly the same as it was before. So, as you can see the append method is simpler to use than create Text Node and appendChild.

However, like I said, it doesn't work on old browsers yet. So, if you want to use it, you have to make sure you have fall backs, if you're also supporting older browsers. If you choose to use the append method, make sure you read the documentation on Mozilla Developer Network. In particular, how to provide a polyfill for Internet Explorer 9 and lower.