Menu
We're looking for ways to create a DOM document in javascript from a string, but without using Jquery. Is there a way to do so? [I would assume so, since Jquery can do it!]
For those curious, we can't use Jquery, becase we're doing this in the context of a Chrome application's content script, and using Jquery would just make our content script too heavy.
741
The createElement() method is used for creating elements within the DOM. It accepts two parameters, a tagName which is a string that defines the type of element to create, and an optional options object that can be used to modify how the element is created.
The createElement() method creates an element node.
The simplest way to do this is to create an element, insert the string into with innerHTML , then return the element. /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { var dom = document.
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser(); var doc = parser.parseFromString("<html_string>", "text/html"); (the resulting doc variable is a documentFragment Object).
53
In case you're still looking for an anwer, and for anyone else coming accross it, I just have been trying to do the same thing myself. It seems you want to be looking at javascript's DOMImplementation:
http://reference.sitepoint.com/javascript/DOMImplementation
There are few references to compatibility as well here, but it's fairly well supported.
In essence, to create a new document to manipulate, you want to create a new Doctype object (if you're going to output some standards based stuff) and then create the new Document using the newly created Doctype variable.
There are multiple options to be put into both the doctype and the document, but if you're creating an HTML5 document, it seems you want to leave most of them as blank strings.
Example (New HTML5 DOM Document):
var doctype = document.implementation.createDocumentType( 'html', '', ''); var dom = document.implementation.createDocument('', 'html', doctype); The new Document now looks like this:
<!DOCTYPE html> <html> </html> Example (New XHTML DOM Document):
var doctype = document.implementation.createDocumentType( 'html', '-//W3C//DTD XHTML 1.0 Strict//EN', 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd' ); var dom = document.implementation.createDocument( 'http://www.w3.org/1999/xhtml', 'html', doctype ); So it's up to you to populate the rest of it. You could do this as simply as changing
dom.documentElement.innerHTML = '<head></head><body></body>'; Or go with the more rigorous:
var head = dom.createElement( 'head' ); var body = dom.createElement( 'body' ); dom.documentElement.appendChild(head); dom.documentElement.appendChild(body); All yours.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
