JavaScript Ninja ☕ - createDocument With DocType - The Missing Example

Posted at


DOM Documentations Are So Limited!


Hopefully this example will get you going of generating an HTML5 (or any DTDs documents),
for whatever reason you need to.

icompile-eladkarako-com_createdocument_with_doctype_the_missing_example-png


(function(NAMESPACE_URI, DOC_TYPE, doc_imp, doc, head, body){
"use strict";
/* https://icompile.eladkarako.com/javascript-ninja-createdocument-with-doctype-example/ */

doc = doc_imp.createDocument(NAMESPACE_URI.HTML, "html" ,DOC_TYPE.HTML5);
head = doc.createElementNS(NAMESPACE_URI.HTML, "head");
body = doc.createElementNS(NAMESPACE_URI.HTML, "body");

doc.documentElement.appendChild(head);
doc.documentElement.appendChild(body);

return doc;
}(
/*namespaceURI for content*/
{
NO_NAMESPACE: null /* document does-not belong to a namespace. */
,HTML: "http://www.w3.org/1999/xhtml"
,SVG: "http://www.w3.org/2000/svg"
,XBL: "http://www.mozilla.org/xbl"
,XUL: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
}
,
(function(doc_imp){
return {
/* will probably used whatever the browser was implemented with the default (on newer browsers it will be HTML5) */
DEFAULT: null

/* HTML5 (and up) */
,HTML5: doc_imp.createDocumentType("html", "", "" ) /*no DTD in HTML5!*/

/* HTML 4.01 */
,HTML401_STRICT: doc_imp.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN", "http://www.w3.org/TR/html4/strict.dtd" )
,HTML401_TRANSITIONAL: doc_imp.createDocumentType("html", "-//W3C//DTD HTML 4.01 Transitional//EN", "http://www.w3.org/TR/html4/loose.dtd" )
,HTML401_FRAMESET: doc_imp.createDocumentType("html", "-//W3C//DTD HTML 4.01 Frameset//EN", "http://www.w3.org/TR/html4/frameset.dtd" )

/* XML 1.0 (a.k.a XHTML) */
,XHTML10_STRICT: doc_imp.createDocumentType("html", "-//W3C//DTD XHTML 1.0 Strict//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" )
,XHTML10_TRANSITIONAL: doc_imp.createDocumentType("html", "-//W3C//DTD XHTML 1.0 Transitional//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" )
,XHTML10_FRAMESET: doc_imp.createDocumentType("html", "-//W3C//DTD XHTML 1.0 Frameset//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" )

/* XML 1.1 (uncommon XHTML - don't use!) */
,XHTML11_DTD: doc_imp.createDocumentType("html", "-//W3C//DTD XHTML 1.1//EN", "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" )
,XHTML11_BASIC: doc_imp.createDocumentType("html", "-//W3C//DTD XHTML Basic 1.1//EN", "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd" )

/*more at: https://www.w3.org/QA/2002/04/valid-dtd-list.html */
};
}(self.document.implementation, null))

, self.document.implementation
, null
, null
, null
));



This is a "Dictionary Code" generator,
meaning its only purpose to to give you a clear example,
with as many variation and comments as possible.

feel free to extend/expand and post your creation for others to follow-up later.



Enjoy.






This example converts HTML to proper document.
(function(doc_imp, HTML_SOURCE){
"use strict";
var NAMESPACE_URI, doc_imp, doc
NAMESPACE_URI = "http://www.w3.org/1999/xhtml";
HTML5 = doc_imp.createDocumentType("html", "", ""); /*no DTD in HTML5!*/
doc = doc_imp.createDocument(NAMESPACE_URI, "html", HTML5);

doc.open();
doc.write(HTML_SOURCE);
doc.close();

return doc;
}(
self.document.implementation
, "your entire html here, including all the junk you want.."
));


You may download the document using XMLHTTPRequest, you can use this snippet to force the usage of text instead-of other types:
var xhr = new XMLHttpRequest();
xhr.responseType = "text";
xhr.overrideMimeType("text/plain;charset=UTF-8");
......


and then replace the document.documentElement with the document-object's (created by the code above) attribute of .documentElement, or just use .innerHTML of your original document.documentElement