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?

Strapless

You could create a div-tag and use innerHTML. – Oolite

can't because it needs to run through my handler which only creates documentFragments – Strapless

Let your handler create a div internally, assign the string to innerHTML, and then move the created nodes to the fragment. – Oolite

hm. let me try if this works. – Strapless

Create div, append div, use outerHTML. – Selfrestraint

@CBroe How is outerHTML supposed to help when it returns a string, and you can't append a string to a fragment? – Oolite

Does innerHTML only return strings? No. So why are you assuming that was the case for outerHTML …? – Selfrestraint

@CBroe outerHTML and innerHTML returns a string. A string that could be <a href='http://stackoverflow.com/'>Stack overflow</a> but that is still a string. Proof: var a=document.createElement('div'); a.innerHTML = "<a href='http://stackoverflow.com/'>Stack overflow</a>"; console.log('The types are: %s %s', typeof a.innerHTML, typeof a.outerHTML);. What are the types? string and string. – Oolite

@CBroe Ok, I misunderstood you. Both innerHTML and outerHTML can be used to both SET and GET the value (as a string). However, a documentFragment (that the question is about) can be inserted into another element. Could you show some code where you use outerHTML and where your return a documentFragent? – Oolite

I was thinking of pretty much the same as your approach – create a DIV, append that to the fragment, and then replace the div by div.outerHTML="…" (would save appending child elements in the loop) … but that does not seem to work cross-browser, so your approach looks to be more solid. – Selfrestraint

Answer 1

Create a template-element, add the text with .innerHTML and get a documentFragment with the content-property:

function stringToFragment(string) {
  const temp = document.createElement('template');
  temp.innerHTML = string;
  return temp.content;
}

Now you can create a documentFragment from a string, and you can even append a documentFragment to a documentFragment:

const frag = stringToFragment('<div>Hello</div>');
frag.append(stringToFragment('<div>Stackoverflow</div>'));

Oolite

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>");

Fullgrown

Careful! Not standardized. – Diaster

Answer 3

This may works:

var foo = document.createDocumentFragment();
var someText = 'Hello <a href="www.world.com">World</a>';
var item = document.createElement('span');
item.innerHTML = someText
foo.appendChild(item);
document.body.appendChild(foo);

Gillie