Head Rush Ajax

260

Chapter 4.5

Once you’ve got the CD cover <img> element, and the “top5” <div>,

you need to add the <img> to that <div>. There are several ways you

can add an element to another element:

Adding children to an element

Add CD rankingsCreate JS le Add CD to Top 5

Start over

div.replaceNode(img, img1);

1. You can replace a node

with the node you’re adding

to the <div>’s children:

div.insertBefore(img, img3);

2. You can insert a node

before another node in

the <div>’s children:

div.appendChild(img);

3. You can add a node to

the <div> after all of the

children it currently has:

img2

img1

img4

img3

div

1

img

2

img

img

3

adding child elements

Here’s the “top5” <div>

that you want to add the

CD cover image to.

This is the <img> element

for the CD cover that was

clicked on by the user.

img

Which approach do you think we should use to

add the CD cover to the “top5” <div>?

As you add CDs to the Top 5

list, you want to add newer

CDs to the “end” of the list.