I would like to create a reuseable html block using documentFragment. The idea is to create and fill a block of html code similar to below, for every object in an existing array. I'm not worried about filling the inner html yet, for now I just want to build a nested hierarchy.

<div class="container">
    <div class="titleABC">
        <h2 class="abc"></h2>
        <h2 class="efg"></h2>
        <h2 class="xyz"></h2>
        ...
        ...
        ...
        ...
    </div>
</div>

I've add the code I was working on to a js Fiddle.

I could not get more than one element to work in the document Fragment and was wondering if this is possible. Or if there is a better way to accomplish this, a steer in the right direction would be appreciated.

Ultimately I want to be able to add code like... line 16, 17, 18, 19 in my js fiddle, and have a code block generated simply from having added it to the array.

Thank you in advance for time you waste helping me with my nonsense.