The Book of JavaScript, 2nd Edition

Advanced DOM Techniques

So far we've seen how to use JavaScript to change the HTML in a div and a span, and how to hide, show, and move HTML elements by changing various attributes of their style objects. We've also seen how to get access to HTML elements using getElementById() and getElementsByTagName(). All of these techniques make a web page dynamic by altering HTML elements that are already on the page. This section discusses a few ways to dynamically add new HTML elements to a web page.

Actually, we've already added new HTML elements to a web page by putting them in the innerHTML property of a span or div. The makeBig() function in Figure 13-14, for example, added a new <font> tag to the page. Often, injecting HTML into your web pages using ...