html generation via javascript: avoiding htmltidy error

Question

I have a web page that generates HTML via JavaScript.

When validating using HTML validator 0.9.5.1 in Firefox 22, I get an error: 'document type does not allow element "span" here'

I am using this JavaScript:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 ...<body>...
 <script type='text/javascript'>
var someHtml = '<span>Hello world!</span>';
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
 </script>

Obviously the parser assumes that <span> is nested inside <script>

How should i rewrite the JavaScript to pass HTML validation? I would prefer a solution that does not require me to create HTML elements.

Note: The answers in Avoiding HTML-in-string / html() in a jQuery script do not help me since I know that the code works. I want to reformat to avoid validation errors.

I don't mean to ask the obvious but what does the DTD you're checking against say about where your div can and can't be? — Bryan Abrams, Jul 17 '13 at 09:39

Mics · Answer 1 · 2013-07-17T09:54:22.007

1

You can't put <div> inside <pre>. <pre> can contain phrasing content only, where <div> is not.

Also you should wrap your script with <![CDATA[ ... ]]> section since doctype is XHTML.

edited Jul 17 '13 at 09:54

answered Jul 17 '13 at 09:47

Mics

1,420
14
19

You are right. I updated the example to use div instead of pre. the problem is still the same – k3b Jul 17 '13 at 09:48

BenLanc · Accepted Answer · 2013-07-17T09:56:13.343

the pre element is for preformatted text, not more HTML.

HTML Tidy's objection is that you are putting something that it believes you expect the browser to render as HTML, you need to scape the entities (replacing < and > with < and >) so that it is interpretted as text.

UPDATE IN RESPONSE TO COMMENT: With an XHTML doctype, the document must be wellformed XML. So, you need CDATA marks inside your script tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
  <script type='text/javascript'>
  //<![CDATA[
  var someHtml = "<div>Hello world!</div>";
  var e;
  e = window.document.createElement('div');
  e.innerHTML = someHtml;
  window.document.body.appendChild(e);
  //]]>
  </script>
  </body>
</html>

You are right. I updated the example to use div instead of pre. the problem is still the same — k3b, Jul 17 '13 at 09:49

html generation via javascript: avoiding htmltidy error

2 Answers2