Firefox issue - Picture tag doesn't work if inside angular app.

main.js

// Code goes here

function createRenderElement(parentElement, name, attrs) {
    var el = document.createElement(name);
    
    // insertion in DOM before applying attributes doesn't work in Firefox
    //parentElement.appendChild(el);
    
    for (var i = 0; i < attrs.length; i += 2) {
        el.setAttribute(attrs[i], attrs[i + 1]);
    }
    
    // will work in Firefox
    parentElement.appendChild(el);
    
    return el;
}

var picture = createRenderElement(document.body, 'picture', []);

createRenderElement(picture, 'source', ['media', '(min-width: 1280px)', 'srcset', 'https://placehold.it/400x400']);

createRenderElement(picture, 'source', ['media', '(min-width: 1024px)', 'srcset', 'https://placehold.it/300x300']);

createRenderElement(picture, 'source', ['media', '(min-width: 640px)', 'srcset', 'https://placehold.it/200x200']);

createRenderElement(picture, 'source', ['srcset', 'https://placehold.it/100x100']);

createRenderElement(picture, 'img', ['src', 'https://placehold.it/401x401']);