Windows 8 Metro HTML parser closes tags as you add them to an element.

I found some interesting HTML Parsing behavior in Metro.  I had been stuck on a positioning issue for a bit, so I went to the DOM explorer to see what was going on. (Shoulda done that first!) As it turns out, this code:

newCommentsBin.innerHTML = "";
for (var comment in newComments) {
    if (comment >= 3) { break }
    newCommentsBin.innerHTML += "<div class='newComment'>";
    newCommentsBin.innerHTML += "<img class='commentPic' src='" + newComments[comment].fromPicture + "'>";
    newCommentsBin.innerHTML += "<div class='commentFrom'>" + newComments[comment].fromName + "</div>";
    newCommentsBin.innerHTML += "<div class='comment'>" + newComments[comment].text + "</div>";
    newCommentsBin.innerHTML += "</div>";
}

was producing this HTML:

<div class="newComment"></div>
</div>
<img class="commentPic" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/xxx.jpg"></img>
</img>
<div class="commentFrom">User 1</div>
</div>
<div class="comment">where do you see the icon? I don't. Is this in the BB wall?</div>
</div>
<div class="newComment"></div>
</div>
<img class="commentPic" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/xxx.jpg"></img>
</img>
<div class="commentFrom">User 2</div>
</div>
<div class="comment">the icon shows up... yay</div>
</div>
<div class="newComment"></div>
</div>
<img class="commentPic" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/xxx.jpg"></img>
</img>
<div class="commentFrom">User 1</div>
</div>
<div class="comment">no idea...</div>
</div>
</div>

The renderer was altomatically closing each tag as I added it to the InnerHTML property of the element! I did not know it would do that.

I got around the problem by using a variable and assigning it all at once.