Dynamic bulk creation of (nested) elements dsone

Recently I am re-doing a very old project of mine, where I try to use as much plain JavaScript as possible.
Main reason is to keep dependencies at a healthy minimum and to utilize new ES features with Babel, as well as for the fun itself. There's really no need for jQuery whatsoever these days anymore.

Even if plain JavaScript has improved immensely since I started with it, there's still one main disadvantage. You have to write a lot of code for simple tasks. To speed things up you have to write quite a few little helpers, with the side effect of making your code more readable.

For instance, that's the reason why I aliased $ and $$ for document.querySelector(All).
In my project there's not that much JS necessary, but there's still a lot of createElement here and there, appending childs to parents and stuff. So I end up with a lot of similar code.
Basically plain JS leads to DRY violations (if you don't pay attention).

Hence I quickly hacked together a simple solution to create nested elements in a recursive manner, returning the complete block of elements.
There could be a bit more error handling, but it fulfills its needs.

It works like this: you insert an Array of elements you want to have created.
Example: [ 'div', 'h1', 'span', ... ]
This would create each element and append it to the previous, if there is no previous element that's the parent (here that's the div).

Now, that's not quite helpful, what's with innerHTML? And how do we separate the information of what exactly is the element and what the innerHTML?
Easy, instead of a string naming the element, we can use a JSON representation and alias the element to create with an underscore and the innerHTML with two underscores.
Example: [ 'div', { '_': 'h1', '__': 'This is a header' }, { '_': 'span', '__': 'Some span content' }, ... ]

Great, but what about all other attributes, like class, custom data attributes?
Easy, we just add it to the JSON literal as is.
Example: [ 'div', { '_': 'h1', '__': 'This is a header', 'class': 'header' }, { '_': 'span', '__': 'Some span content', 'data-test': 'test-attribute' }, ... ]

Cool, but what was that about nesting?
Simple, use a subarray, if the function finds an array instead of a string of JSON object, it calls itself with that array again, creating the whole subarray, return the created elements and append that to a previous element.
Example: [ 'div', { '_' : 'h1', '__': 'Example Elements' }, [ { '_': 'h3', '__': 'Subheader' }, { '_': 'small', '__': 'Something small on the side', 'class': 'pull-right' } ]

  Creative Commons License
Plain JavaScript Elements Recursion