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.

Comments are closed

Bill Sempf

Husband. Father. Pentester. Secure software composer. Brewer. Lockpicker. Ninja. Insurrectionist. Lumberjack. All words that have been used to describe me recently. I help people write more secure software.

PageList

profile for Bill Sempf on Stack Exchange, a network of free, community-driven Q&A sites

MonthList