Writing a <div> with a class using document.write()

Question

I am trying to write a div using document.write() from a script. I seem to be able to write a blank div but whenever I add a class or any attributes to the div it doesn't write anything anymore.

This is the code I am trying to run.

document.write("<div class="new_prod_box">");
document.write("<a href="details.html">");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</a>");
document.write("<div class="new_prod_bg">");
document.write("<a href="details.html"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>");
document.write("</div>");
document.write("</div>");

I am not having a problem loading the xml as I have already tested this, and I have run a script in the section where I want it to be written and it writes in that area just fine. I have also testing using a plain div which works fine, it just seems to be a problem when assigning a class to that div.

I have run this code to see if it was a problem with document.write() writing a div tag and it works fine, however it doesn't have any formatting.

document.write("<div>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</div>");

I would just write a div in the main section and then write everything to that but I need have one created for each entry in the xml, and this is the only way I can think of doing so.

This is the basic outline of the div that I need to have for each product

<div class="new_prod_box">
    <a href="details.html">product name</a>
    <div class="new_prod_bg"
    <a href="details.html"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>
    </div>           
</div>

Any help is greatly appreciated.

Answer 1

It's because your string contains double quotes. You need to either use single quotes, or escape the double quotes. This is not valid:

document.write("<div class="new_prod_box">");

These are:

document.write('<div class="new_prod_box">');
document.write("<div class=\"new_prod_box\">");

Answer 2

Try this:

document.write('<div class="new_prod_box">\
  <a href="details.html">' + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</a>\
  <div class="new_prod_bg">\
      <a href="details.html"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>\
  </div>\
</div>');