Creating A Document Fragment

On a recent project, using Vanilla-JS, I was looking to simplify the general coding patterns I've used for years. I was taking an array of content and converting it to a longer string for inclusion on the DOM.

For example ...

var html = [
  '<div>First</div>',
  '<div>Second</div>',
  '<div>Third</div>'
].join('');

While this pattern works, to some degree, if there is any nesting it can get rather tedious to deal with.

Template Literal

HTML Template

Wrapping Up

So, here we can see a clear pattern to allow for content to be created and appended as a child to some element.

What is not included is how the string gets converted into an HMTL fragment ...

function fragmentFromString (stringHTML) {
  let temp = document.createElement('template');
  temp.innerHTML = stringHTML;
  return temp.content;
}

This solution came from the following ...

answer re: Inserting arbitrary HTML into a DocumentFragment

Aug 9 '14

113

Here is a way in modern browsers without looping:

var temp = document.createElement('template');
temp.innerHTML = '<div>x</div><span>y</span>';

var frag = temp.content;

or, as a re-usable

function fragmentFromString(strHTML) {
    var temp = document.createElement('template');
    temp.innerHTML = strHTML;
    return temp.content;
}

UPDATE I found a simpler way to use Pete's main idea, which adds…

Open Full Answer

Adding The Document Fragment To The DOM

The final step is pretty straight forward; using .appendChild to a DOM element allows the fragment to be placed into the DOM.