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
– Bryan Abrams, Commented Jul 17, 2013 at 9:39
"Obviously the parser assumes that <span> is nested inside <script>" - I doubt that. — Paul D. Waite
– Paul D. Waite, Commented Jul 17, 2013 at 10:26

BenLanc · Accepted Answer · 2013-07-17 09:56:13Z

1

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>

edited Jul 17, 2013 at 9:56

answered Jul 17, 2013 at 9:47

BenLanc

2,4641 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

k3b Over a year ago

You are right. I updated the example to use div instead of pre. the problem is still the same

Mics · Accepted Answer · 2013-07-17 09:54:22Z

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, 2013 at 9:54

answered Jul 17, 2013 at 9:47

Mics

1,43014 silver badges20 bronze badges

1 Comment

k3b Over a year ago

You are right. I updated the example to use div instead of pre. the problem is still the same

Collectives™ on Stack Overflow

html generation via javascript: avoiding htmltidy error

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related