How to convert a string into a DOM element

Question

This might have been asked before and answered or the question has been closed before someone could properly answer it. Just in case someone googles for it here is the answer:

https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.



/*
 * DOMParser HTML extension
 * 2012-09-04
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;

            doc.body.innerHTML = markup;
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

We appreciate your efforts to help! Please post the question and answer separately. Then mark the answer as accepted. — Rutwick Gangurde, Mar 26 '13 at 12:30
I imagine whichever question you were referring to was closed as a duplicate of this: http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements. This isn't a question. You should post this answer on a relevant question. — James Donnelly, Mar 26 '13 at 12:30
Ok, I'll post the answer as an answer. Just see a question going down the toilet because it was wrongly asked but most likely will show up on google at some point since the op won't remove it. If admins close a question it's better that it's removed or rephrased so future help seekers do not stumble on unanswered junk. — HMR, Mar 26 '13 at 12:32
Ok, it's in the right format now, why still the downvote? Is it not allowed to create a "wiki" for questions that are bound to be asked by people so you can refer to it when asked? There are a lot of people here who are not here to help but just browse around to kill or kick questions (downvote and close). Luckily most users come here to help or seek help but we could do without some of the SO police who close and downvote just for the sake of it and not because the content of the question or answer is incorrect. — HMR, May 10 '13 at 00:18
I know it's easier to just click the down or close button but really isn't helpful for people. More and more often I see questions downvoted and closed without so much as a comment. It shows good character to patiently explain to people what is expected on SO instead of just be snobby and rude to new comers by kicking their question just because they have difficulty to provide a good technical explanation of the problem. — HMR, May 10 '13 at 00:25
I was told if I want to re open a closed question (not my own but I wanted to answer it) that I need to edit it and then they will considor re opening it. After editing it they refused the changes. If "you can edit it to re open" is the argument then why close it in the first place? If you're here to help then edit the question instead of closing it right? This "person" and other like him make helping ppl on SO as difficult as applying for a passport at the PRC government office. — HMR, May 10 '13 at 00:28

HMR · Accepted Answer · 2013-05-10T00:54:14.953

https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.

Some browsers do not support text/html so here is the extra code from the MDN site to add support for text/html

/*
 * DOMParser HTML extension
 * 2012-09-04
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;

            doc.body.innerHTML = markup;
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

IE8 and below

Some browsers like IE8 and below do not have DOMParser, you can parse a string to HTML in the following way:

var div=document.createElement("div");
div.innerHTML=HTMLString;
var anchors=div.getElementsByTagName("a");

How to convert a string into a DOM element

1 Answers1