function createFromTemplate(str) {

    // Removes an attribute from a HTMLElement and returns the value.
    const removeAttribute = (el, name) => {
        const value = el.getAttribute(name);
        el.removeAttribute(name);
        return value;
    };

    // Recursive function to resolve template
    const resolve = (element, base = {}) => {

        // Check key and container attribute
        const con = removeAttribute(element, ':obj');
        const key = removeAttribute(element, ':ref');
        const subtree = con ? (base[con] = {}) : base;

        // Check and save element
        key && (base[key] = element);
        for (const child of Array.from(element.children)) {
            const arr = removeAttribute(child, ':arr');
            const sub = resolve(child, arr ? {} : subtree);

            if (arr) {

                // Check if there is already an array and add element
                (subtree[arr] || (subtree[arr] = []))
                    .push(Object.keys(sub).length ? sub : child);
            }
        }

        return base;
    };

    return resolve(createElementFromString(str));
}
Creates a new html element, every element which has
a ':ref' attribute will be saved in a object (which will be returned)
where the value of ':ref' is the object-key and the value the HTMLElement.

It's possible to create a hierarchy if you add a ':obj' attribute. Every
sibling will be added to the object which will get the name from the 'data-con' attribute.

If you want to create an Array out of multiple elements, you can use the ':arr' attribute,
the value defines the key and all elements, which has the same parent and the same 'data-arr' attribute,
would be added to it.

@param str - The HTML String.