It's alright, I worked it out with a little help.
If anyone's wondering, the answer is in the following line of code:
p.innerHTML = "i: " + i + "<br>" + p.innerHTML;
I'll explain it with two iterations, in four steps each.
Hopefully I got it right, and explained it in non-nerd well lol.
[Iteration 1]
Step 1. When i = 10, the browser prints the following in the <p> tag:
i: 10 <br>
Step 2. p.innerHTML (right of the = operator) is empty for now, hence, nothing happens on the screen in this step.
Step 3. The printed line (i: 10 <br>) is assigned to p.innerHTML (left of the = operator).
Step 4. i is decremented by -1, and now i = 9.
[Iteration 2]
Step 1. i = 9, and the browser FIRST prints the following in the <p> tag:
i: 9 <br>
Step 2. p.innerHTML (right of the = operator), which is now i: 10 <br>, is added after i: 9 <br>, and the browser NOW displays i: 9 <br>i:10 <br>.
Step 3. The printed line (i: 9 <br>i:10 <br>) is assigned to p.innerHTML (left of the = operator).
Step 3. i is decremented by -1, and now i = 8.