How to append an HTML string to a DocumentFragment?

Question

I'm adding textnodes to a documentFragment like this:

var foo = document.createDocumentFragment();
var someText = "Hello World";
foo.appendChild(document.createTextNode(someText));

This works fine, but sometimes I'm being passed "text" which includes inline links like this:

var someOtherText = "Hello <a href='www.world.com'>World</a>";

Which in my handler is converted to hardcoded text instead of a link.

Question:
How do I append an HTML string like the above into a documentFragment? If I'm not using textNodes can this be done using appendChild?

Answer 1

Creates a temporary div, inserts the text in innerHTML, and then moves all nodes of the div to the fragment. Since an element only can be in one place at a time, it will automatically be removed from the temporary div-tag.

var frag = document.createDocumentFragment();

var div = document.createElement('div');
div.innerHTML = '<a href="http://stackoverflow.com/">Stack overflow</a>';
while (div.firstChild) frag.appendChild(div.firstChild);

Answer 2

document.createRange().createContextualFragment("<span>Hello World!</span>");

It returns a DocumentFragment.

Support IE >= 9

EDIT:

recent versions Safari seems to fail with the short way, here is a little bit longer but working way:

var range = document.createRange();
range.selectNode(document.body); // Select the body cause there is always one (documentElement fail...)

var fragment = range.createContextualFragment("<span>Hello World!</span>");