Chapter 7. Manipulating the DOM: My wish is your command

image with no caption

Sometimes you just need a little DOM mind control.

It’s great to know that web browsers turn your XHTML into DOM trees. And you can do a lot by moving around within those trees. But real power is taking control of a DOM tree and making the tree look like you want it to. Sometimes what you really need is to add a new element and some text, or to remove an element, like an <img>, from a page altogether. You can do all of that and more with the DOM, and along the way, banish that troublesome innerHTML property altogether. The result? Code that can do more to a page, without having to mix presentation and structure in with your JavaScript.

Webville Puzzles... the franchise

All the cool kids have been playing the Fifteen Puzzle you developed for Webville Puzzles. The company’s been making so much on subscription fees that they want a new puzzle... and they’ve come to you to build the interactivity.

This time, the company wants something a little more educational: Woggle, an online word generation game. They’ve already built the XHTML, and even know exactly how they want the puzzle to work.

Here’s the initial Woggle page:

image with no caption

Get Head First Ajax now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.