IE 7 jQuery .append functionality not working

Question

I have the following snippet of code:

$("#QnAList").append("<div id=qdiv" + i + " class=divBase>
<span id='" + i + "'>" + msg.d[i].QuestionText + "</span>
<span id='display'" + i + "'>" + answerDisplay + 
"<span class='triage'> </span></div>");

msg.d[i].QuestionText is the problem that I'm having. In FF it is displaying the text perfectly. In IE7 the only thing that is displaying is the answerDisplay value which is input elements that I'm writing out on the fly.

When I tak out all the divs and spans and put in some <p></p> then the msg.d[i].QuestionText displays with the answerDisplay value. Can anyone see anything I'm doing incorrectly with this snippet of code?

Thanks!

Answer 1

There's a problem here:

<span id='display'" + i + "'>" + answerDisplay + 

That results in:

<span id='display'nn'>text</span>

So that extra quote is bound to cause issues, it should be:

<span id='display" + i + "'>" + answerDisplay + 

Also consider adding quotes to the properties on the outer <div>, or constructing the elements as DOM nodes.

Answer 2

Dumb answer for a dumb question :)

I didn't have the ending span tag here:

...<span id='display'" + i + "'>" + answerDisplay + 
"<span class='triage'> </span></div>");

Thanks for everyone that looked at it.

Thanks to Nick Craver who helped me debug it.

Answer 3

You forgot to close a span, you have cases where the quotes don't work out right, and so on.

This is because it's hard to keep track of what's going on in a long string.

This may be more lines, but it's clearer, so you'll make less errors:

  // create empty spans and divs
var span1 = $("<span>");
var span2 = $("<span>");
var span3 = ${"<span>");
var div   = $("<div>");

  // Add html and attributes you need

span1.attr("id", i);
span1.html(msg.d[i].QuestionText);

span2.attr("id", "display" + i);
span2.html(answerDisplay)

span3.attr("class", "triage");

div.attr("id", "qdiv" + i);
div.attr("class", "divbase");

  // Add everything to the DOM
div.append(span1);
div.append(span2);
div.append(span3);
$("#QnAList").append(div);

I think using $("</div>") is actually faster, but I used the form above for readability.