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.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
mana
  • 151
  • 1
  • 1
  • 3
  • 1
    Just curious, why would you want to do this for? – Ben Everard Jun 30 '10 at 08:58
  • well, i want to change the doctype if the browers is firefox or opera. I got the browser detection code working. – mana Jun 30 '10 at 09:00
  • 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. – Piskvor left the building Jun 30 '10 at 09:00
  • 2
    This is readonly as per https://developer.mozilla.org/en/DOM/document.doctype and http://www.devguru.com/technologies/xmldom/quickref/document_doctype.html – JoseK Jun 30 '10 at 09:00
  • 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 '10 at 09:01
  • Browser detection is rather unreliable: do you check if Opera Mini is not throwing false positives? What about Chrome (and other Webkit-based browsers)? – Piskvor left the building Jun 30 '10 at 09:01
  • well, i have checked with Opera, Chrome, Firefox, IE8, and Safari. The browers that give me problems is IE8, Firefox and Opera. – mana Jun 30 '10 at 09:06
  • by using, i am then able to fix the ie8 problem, but mess up opera and firefox. By using i am able to fix the firefox problem, but mess up ie8 and opera. by using i am able to fix opera problem, i am able to fix opera and ie8 but mess up firefox – mana Jun 30 '10 at 09:07
  • 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](http://hsivonen.iki.fi/doctype/). – Marcel Korpel Jun 30 '10 at 09:42

6 Answers6

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);
m93a
  • 8,866
  • 9
  • 40
  • 58
Akash Saikia
  • 452
  • 6
  • 19
  • Thanks Akash, this has helped me out with something I'd been struggling with for a while in PhantomJS. – Jamie Mason May 27 '13 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 '14 at 22:05
  • try out this http://stackoverflow.com/questions/8227612/how-to-create-document-objects-with-javascript – Akash Saikia Feb 19 '14 at 05:50
  • @AkashSaikia Saikia Would it be better to put this script inside `window.load` or 'document.ready`? `Window.load`, right? – Jim22150 Jul 01 '14 at 00:51
  • 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. – Akash Saikia Jul 01 '14 at 05:38
  • It seems as though document.implementation.createDocumentType() isn't available in IE8, IE9, or IE 11. I haven't tested in IE10. Can anyone confirm if this is true? – jkupczak Aug 11 '14 at 18:27
  • 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 '17 at 00: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():

Zorf
  • 6,334
  • 2
  • 29
  • 24
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);
}
Troy Alford
  • 26,660
  • 10
  • 64
  • 82
Attila O.
  • 15,659
  • 11
  • 54
  • 84
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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 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](http://hsivonen.iki.fi/doctype/#handling). – Marcel Korpel Jun 30 '10 at 09: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. – T.J. Crowder Jun 30 '10 at 10:14
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

Sanuj
  • 1,077
  • 1
  • 11
  • 23
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.

Matt Mitchell
  • 40,943
  • 35
  • 118
  • 185