4a.15. Adding the ranking numberNow that you know how many CDs there are in the Top 5, you can start adding a ranking number to each CD as it's added. Here's a look again at how we want the CD ranking to look. The ranking is a white number inside a black box, overlaid on the top-left of the CD cover image. The CD cover is an <img> element, and a child node of the "top5" <div>. 4a.15.1. More additions to our DOM treeWe need a text element for the ranking number. For the current ranking, we can just add one to numCds. But getting the formatting of the ranking isn't a JavaScript thing... we handle style with CSS, right? Let's create a new <span> to put the ranking in, and then create some CSS to style the <span> just like we want it. So here's what we want the "top5" <div> part of the DOM tree to look like: body div div The "top5" <div>. There should be a <span> for each <img> element, just before the <img> the <span> ranks.span img span img Here are the <img> elements for the CD covers. The ranking itself is just a text node with a number."1" "2" |