you’re on your way 4
267
developing dom apps
Now 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.
Adding the ranking number
The CD cover is an <img>
element, and a child node of
the “top5” <div>.
The ranking is a white
number inside a black box,
overlaid on the top-left of
the CD cover image.
We 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:
More additions to our DOM tree
div
img
img
body
span
span
div
“2”
“1”
Here are the <img> elements
for the CD covers.
There should be a <span> for
each <img> element, just before
the <img> the <span> ranks.
The ranking itself is just a text
node with a number.
The “top5” <div>.