Home Page DOM Tutorials Dynamic Text The Dynamic <div>

The Dynamic <div>

If you look at the HTML for the right side of the previous page's example, you'll see this:

    <div id="instructionDiv">
    Click any bold word or phrase to see its meaning.
    </div>

    <div id="fullDiv">
    <p>
    The primary source for obtaining the Linux system is
    the Internet itself, and it is where the latest...
    ...versions on CDROM.
    </p>
    </div>

    <div id="glossDiv">
    <dl id="dlist">
    <dt id="dterm">spanish</dt>
    <dd id="ddefn">english</dd>
    </dl>
    </div>

The first two <div>s are no surprise; they're needed for the initial instructions and the full translation. The real surprise is the <div> with the id="glossDiv". You might have thought that the HTML would need sixteen different <div>s, one for each of the words to be translated. Instead, we have only one <div>, and it is just a placeholder. What we're going to do is replace the words spanish and english with the appropriate text on the fly. To do this, we first have to review the concept of nodes.

Example

Index

Review of Nodes