HTML Element Manipulation with JavaScript

We have alluded to the ability of JavaScript to directly manipulate elements within an HTML document a number of times. We'll now go ahead and see firsthand exactly how the language can be leveraged to perform this sort of manipulation.

Before moving on to the activity, there are a couple of concepts to understand so that you know how HTML elements function. As you've seen through example, elements in HTML generally consist of an opening and closing tag, within which there is often text data. If you think of a <p> tag or paragraph element in HTML, the text within that element, between the opening and closing tags, is the text displayed to the user.

If we need to address a specific HTML element to manipulate, the best way to do so is with the getElementById() JavaScript method. Of course, the element in question must contain an ID attribute for this to function as expected.

For example, maybe we have a simple HTML...