Me gustaría crear un bloque html reutilizable usando documentFragment. La idea es crear y llenar un bloque de código html similar al siguiente, para cada objeto en una matriz existente. Todavía no me preocupa llenar el html interno, por ahora solo quiero construir una jerarquía anidada.

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

Agregué el código en el que estaba trabajando a un js Fiddle .

No pude hacer que más de un elemento funcionara en el Fragmento del documento y me preguntaba si esto es posible. O si hay una mejor manera de lograr esto, se agradecería una guía en la dirección correcta.

En última instancia, quiero poder agregar código como ... línea 16, 17, 18, 19 en mi js fiddle, y tener un bloque de código generado simplemente por haberlo agregado a la matriz.

Gracias de antemano por el tiempo que pierdes ayudándome con mis tonterías.