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