Head Rush Ajax

you’re on your way 4

265

developing dom apps

Take a close look at the code for

addToTop5() so far. First, we get the

<img> element for the CD cover, and

then get a reference to the “top5” <div>.

So far, no surprises, right?

Next, we take the <img>, and add it as a

child of the “top5” <div>. At that point,

the parent of the <img> is no longer the

“cds” <div>... it’s the “top5” <div>. And

since elements have only one parent, it

gets moved in the DOM tree:

An element can

have only one parent

Hey, you forgot to show us something...

where’s the code that removes the CD

from the top section when you put it down

in the Top 5 listings?

div

img

img

img

img

img

div

body

div

div

img

img

img

img

img

div

body

div

top5Element.appendChild(imgElement);

appendChild() doesn’t create a

copy of imgElement... it actually

changes the parent of the

element to the “top5” <div>.

Here’s imgElement...

...and here’s the “top5” <div>.

You don’t have to actually

remove the <img>... when

you append it to the “top5”

<div>, it simply disappears

from the “cds” <div>.

The “cds” <div>.

The “top5” <div>.