Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 34

FIGURE 1-22 Converting all the <p> elements to <a> elements
All your plain-text paragraphs now display as hyperlinks. Your original innerDiv element is
gone and no longer in the DOM. Your only reference to it is within the JavaScript code. You
would need to hang on to that reference if you intended to swap it back into the DOM later.
Further, because the code didn't assign the new <div> element a unique id , the only way
to get a reference to it in the DOM is through your existing code reference. For this reason,
a recommended practice is to always give your new elements a unique id . If the JavaScript
variables go out of scope before you insert them into the document, you lose the references
to your elements completely.
In this section, you saw how to access HTML elements by using JavaScript to manipulate
the DOM in the browser. You now can retrieve references to the elements or nodes that make
up your HTML document as well as modify, add, and remove elements in the HTML document.
Next, you look at implementing media controls into your pages.
Implementing media controls
Embedding multimedia elements into webpages isn't a new concept. This capability has been
around for a long time and has presented challenges in various situations. One key challenge
has often been dependence on a third-party object integrated with the browser to render the
media. In this section, you look at two new elements added to the HTML5 specification that
work with multimedia natively in the web browser and with JavaScript. You also examine the
<video> and <audio> elements.