Section 4a.8. Adding a CD to the top 5 | Head Rush Ajax (Head First)

4a.8. Adding a CD to the top 5

Now that clicking on a CD cover runs addToTop5(), it's about time to get that function working, isn't it? When a CD is clicked, we need to move that CD from the "cds" <div>, near the top of the screen, down to the Top 5 listings. Thanks to the DOM, though, this should be a piece of cake.

Let's start by looking at a bit of the DOM tree for top5.html.

     <html>      <head>       <title>Top 5 CD Recommendations</title>       <link rel="stylesheet" type="text/css" href="top5.css  " />      </head>      <body>       <div >         Click on a CD cover to add it to the Top 5 list.         If you want to start over, click the "Start Over"         button to clear the Top 5 list.       </div>       <div >        <img  src="/books/2/850/1/html/2/images/vaughan_flood.jpg" />        <img  src="/books/2/850/1/html/2/images/clapton_cream.jpg" />        <!-- Lots more images in here... -->       </div>       <div >         <h2>My Top 5 CDs</h2>         <div ></div>       </div>      <form>       <input type="button" value="Start Over" />      </form>     </body>     </html>

 Here's top5.html, from back on page 246. The browser takes this HTML, and turns it into this DOM tree.                                           body This is the "instructions" <div>... we're not worried about it right now.  div divThis is the "cds" <div>, and is where the 12 CD cover images start out. divThis <div> contains a heading, as well as...formThis is the <form> with the "Start Over" button in it. There are actually 12 <img> elements in top5.html. img  img  imgWhichever CD is clicked on needs to move from here...  img  img  h2 div ...to here. ...the "top5" <div>, where the <img> of the clicked on CD cover should go.