Question

I have some HTML that I insert into a div using javascript. But it converts the inline CSS to something weird. Like for example if I put in the div the following HTML (using document.getElementById("element").innerHTML = ...):

<td valign=top style= border: 0; padding: 0;>

When I see what is actually in the div element(using FireBug) this is what it is:

<TD vAlign=top 0; padding:>

Is it me that is causing this error somehow? Do you find this happens to you also when you insert some HTML with inline CSS into a div using javascript? Any info would be really helpful

Answer 1

Attribute values must have quotes around them:

<td valign="top" style="border: 0; padding: 0;">

Also, since this HTML is embedded as a string in Javascript, be careful with the quotes. I recommend single quotes (') to start/end Javascript strings, and double quotes (") to start/end attribute values:

document.getElementById('element').innerHTML =
    '<td valign="top" style="border: 0; padding: 0;">';