Section 4a.12. Adding children to an element

4a.12. Adding children to an element

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:

 Here's the "top5" <div> that you want to add the CD cover image to. div img img1 img2 img img3 img4 img  1             2             3               imgThis is the <img> element for the CD cover that was clicked               on by the user. 

1. You can replace a node with the node you're adding to the <div>'s children:

    div.insertBefore(img, img1); 

   
   

2. You can insert a node before another node in the <div>'s children:

    div.appendChild(img, img3); 

   
   

3. You can add a node to the <div> after all of the children it currently has:

    div.appendChild(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.