innerHTML compatibility with Strict Doctype

[mayfair]

Hi Guys,

 

Can somebody confirm for me whether or not you can insert HTML tags using innerHTML with a Strict Doctype?

 

For example

 

This validates:

 

document.getElementById('something').innerHTML='blah';

 

This does not:

 

document.getElementById('something').innerHTML='<p>blah</p>';

 

The error message produced by the validator claims "document type does not allow element "p" here". I need to enter multiple lines of text from a DB into a table cell. I have tried using <br/> tags and <ul>'s and the validator kicks off about all of them with the same response.

 

Thanks in advance 

 

 

[trq]

The validator actually thinks your trying to put <p> tags right there where the js is. Move your js into an external file and the problem should go away.

[mayfair]

Thanks for the reply thorpe, unfortunately it's not that simple. The JavaScript has to be called when each cell in a table loads to produce a "loading" effect where the cell contents appear after a few seconds. I've tried using an external JS file and calling a function bound to an onload event, but you can't have that on a Strict doctype either. This is what i've got so far: http://www.compareholidaymoney.com.

 

This nearly validates apart from the Facebook "Like" button and the problem I described in my original post. What makes this even more difficult is the code is generated by PHP, so I have to write the JS inside PHP. I know that usually you would achieve this kind of thing with AJAX, but I don't know how to program it and I like to write all of my own code. To get the images to load, I set a 1px .GIF in place of the image, then use my nested JS to change it's SRC. In case you might be able to help any further, here is the code that is producing the invalid code:

 

echo "
<td class='delivery'>
<div id='delivery".$row_number."'><img src='assets/images/loading.gif' alt='Loading'/></div>
<script type='text/javascript'>
setTimeout(\"document.getElementById('delivery".$row_number."').innerHTML='".$row['delivery']."'\",rand_num);
</script>
</td>
";

 

where

 

$row['delivery']

 

is called from a database and contains <p>text like this</p><p>with paragraph tags</p>

 

 

Any other ideas would be much appreciated

[haku]

Linking to external documents is entirely valid in a strict doctype.

 

But, that being said you can solve your problem like this:

 

var pTag = document.createElement("p");
var textNode = document.createTextNode("blah");
pTag.appendChild(textNode);
document.getElementById('something').append(pTag);

Or something like that. It's been a while since I worked purely in the DOM - I generally work with jQuery nowadays to simplify things.

[mayfair]

Hi haku, many thanks for your suggestion.

 

Linking to external documents is entirely valid in a strict doctype.

 

Yes you are correct, but what I meant to say was you cannot call a function from an onload event anywhere other than the body of the document with a strict doctype.

 

The thought hadn't occured to me to create and update the <p> tags using JS. I will have a bash at this now.

[haku]

Just don't put your onload function inline. You should be able to do something like this:

 

td.onload = function()
{
  //put your code here
}