Creating Markup on the Fly

Summary

In this chapter, you’ve seen different ways of adding markup to a document in the web browser. I’ve shown you some quick examples of the “old school” techniques:

• document.write

• innerHTML

I’ve given you more in-depth examples using the DOM methods. The key to using these methods is to see a web document as a tree of nodes.

• createElement

• createTextNode

• appendChild

• insertBefore

Whenever you use createElement or createTextNode, you are creating a node that floats around in JavaScript limbo. Using appendChild and insertBefore, you can take these DocumentFragments and insert them into the node tree of a document.

You’ve seen the image gallery example refined. Along the way, you’ve seen the construction of a very handy function called insertAfter. You’ll be able to use this function in lots of situations where you need to add markup to a document.