15

anyone here know how i can dynamically change the doctype with javascript?

i have tried with this function,

document.doctype('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">'); ,

but it does not work.

9
  • 1
    Just curious, why would you want to do this for? Jun 30, 2010 at 8:58
  • 1
    Even if you could, what effect are you expecting from it? IIRC, the browser only considers the doctype once, when it's parsing the page. Jun 30, 2010 at 9:00
  • 2
  • 1
    the real reason is because, the design i have created just gets messed up in different browers, and i found out that, by using different doctypes in different browers, the page looks oki again.
    – mana
    Jun 30, 2010 at 9:01
  • 1
    Mana, rather than testing every possible Doctype or trying to change it on-the-fly (which is not possible, or it wouldn't make a difference), try to ask questions about the actual problems you have (including relevant parts of the source code and preferably a link to a problematic example page), so we can fix them, instead of conditionally selecting browser modes, which is not a good idea (always (try to) use Standards mode). FYI, read Activating Browser Modes with Doctype. Jun 30, 2010 at 9:42

6 Answers 6

15

I hope this one might help some of you ( Tested in Console and it changes actual DOCTYPE)

var newDoctype = document.implementation.createDocumentType(
 'html',
 '-//W3C//DTD XHTML 1.0 Transitional//EN',
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdd'
);

document.doctype.parentNode.replaceChild(newDoctype,document.doctype);
7
  • Thanks Akash, this has helped me out with something I'd been struggling with for a while in PhantomJS. May 27, 2013 at 17:16
  • 2
    document.implementation.createDocumentType() is unavailable in IE8, which is, sadly, where I need to use it at the moment.
    – flyingace
    Feb 18, 2014 at 22:05
  • try out this stackoverflow.com/questions/8227612/… Feb 19, 2014 at 5:50
  • 1
    @Jim22150 Yep, it would be nice to wait for the actual DOM to load before we try to access any part of document object. Jul 1, 2014 at 5:38
  • 1
    It changes the doctype text in the inspector tab but nothing more, if you change doctype from html4 to html5 or from xhtml to html it still would behave according to old doctype sadly. tested in firefox 51
    – Owyn
    Feb 24, 2017 at 0:30
3

document.doctype is a read-only property, not method, apparently according to MDC.

What you need is:

https://developer.mozilla.org/En/DOM/DOMImplementation.createDocumentType

Returns a DocumentType object which can either be used with DOMImplementation.createDocument upon document creation or they can be put into the document via Node.insertBefore() or Node.replaceChild():

2
  • createDocumentType is not available in all browsers though. Chromium doesn't have it.
    – Attila O.
    May 30, 2011 at 23:17
  • Mar 30 2013: Chromium has it, and IE9+ Mar 30, 2013 at 21:15
3

To try to justify this use case, I have the following scenario:

I have a TAL template that renders a small portition of the page. I then wrap that portition in parent tags like this:

<html tal:omit-tag="True" ...>
  <body tal:omit-tag="True">
    <div class="wrapper" tal:omit-tag="True">
      ..

        <div id="mydiv" tal:content="foo()">Example content.</div>

      ..
    </div>
  </body>
</html>

This way, this TAL template is viewable/editable as a stand-alone HTML file, by a designer. One cannot omit the DTD in TAL though, so it cannot be added there.

An easy way to add it with JavaScript is like this:

if (!document.doctype) {
    document.write('<!doctype HTML>\n' + \
        document.head.outerHTML + \
        document.body.outerHTML);
}
1

I don't think you can. doctype is listed as a property in the W3C documentation, but it's read-only. Even if it weren't, I can't imagine what effect changing it would have in real-world browsers.

Re your subsequent comments: You'd have to handle this server-side and serve back the page tailored to the target browser. But you shouldn't have to do that in any but some very fringe cases.

2
  • 2
    About your last sentence (“they just flag quirks mode or not depending on whether there is a doctype, not what it is”): that's not true. Several Doctypes will trigger quirks mode, like the HTML 3.2 one the OP mentioned in one of his comments to his question. See Activating Browser Modes with Doctype. Jun 30, 2010 at 9:38
  • @Marcel: Fascinating. I've seen the statement "it doesn't matter, as long as there's a DOCTYPE" so many times, I'm astonished not to have seen it contradicted before. Very interesting table, thanks. And you can see why 3.2 would be quirks mode, too. I've removed the sentence, thanks again. Jun 30, 2010 at 10:14
0

Even if you could, your code would be executing after the page has already decided to render by which case the effect of changing the doctype is nothing. The only way I can imagine modern browsers having doctype issues is that you are relying on quirks mode in IE - fix your design to work for all browsers but IE, then look at IE specific styling.

0

If the problem is only with IE, As I also experienced the same problem, I used quirks Mode for IE - Just use a comment before DOC TYPE declaration and IE will go into quirks mode.

The other way that you can work around is first to load a script to detect the browser and then redirect with the browsers parameter to the other page where you can declare Browser dependent doctype.

example of what I have done with my code is like :-

<!--[if lt IE 9]>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE html>
<![endif]>

Here I have removed the doctype declearation from the browe

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.