Add multiple elements (DIV’s) to IE 11

Question

Hello,

I have the following code:

function LoadProd() {
    var restUrl = "https://tenant.sharepoint.com/sites/site/Negocio/OfertaParticulares/_api/web/lists/GetByTitle('Ofertas Particulares - Criação Produto')/GetItems(query=@v1)?@v1=" + "{\"ViewXml\":\"<View Scope='RecursiveAll'><Query><Where><And><Eq><FieldRef Name='ContentType' /><Value Type='Computed'>DinamicoFolder</Value></Eq><And><Neq><FieldRef Name='Intranet_DestaqueOrdem' /><Value Type='Number'>100</Value></Neq><And><IsNotNull><FieldRef Name='Intranet_SubCategoria' /></IsNotNull><IsNotNull><FieldRef Name='Title' /></IsNotNull></And></And></And></Where><OrderBy><FieldRef Name='Intranet_DestaqueOrdem' Ascending='True' /></OrderBy></Query></View>\"}";
    jQuery.ajax({
        url: restUrl,
        method: "POST",
        headers: {
            "Accept": "application/json; odata=verbose",
            "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
        },
        success: function (data) {
            console.log(data);
            var dataresult = data.d.results;
            dataresult = [].slice.call(dataresult);
            dataresult.forEach(function (key, value) {

                GetTagFolder = (key.Intranet_SubCategoria.results["0"].Label);
                FirstFolderProd = (key.Title);
                FirstFolderWithoutSpaceProd = FirstFolderProd.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '');

                var txt2 = "<div id='PROD"+FirstFolderWithoutSpaceProd+"'></div>";
                jQuery("#SubFolders").append(txt2);

            });
        },
        error: function (error) {
            console.log(error);
        }
    });
}

The result in Google Chrome is:

However for the IE 11 does not work. I have tried adding:

var Div =  document.getElementById("SubFolders");
Div.innerHTML += "<div id='PROD"+FirstFolderWithoutSpaceProd+"'></div>";

I’ve tried many shapes and even used the setTimeout and the setInterval, even worked but created me the div’s all with the same ID. There’ll come a time when I’ll have this in my code:

var CreateFirstExpandableProd = '<div class="containerOfertasProd" id="IDcontainerOfertasProd' + FirstFolderWithoutSpaceProd + '"><div class="headerOfertasProd" id="IDheaderOfertasProd' + FirstFolderWithoutSpaceProd + '" data-SecondFolderNameProd="' + FirstFolderProd + '"><span id="ExpandableNameProd">' + FirstFolderProd + '<span id="ExpandSign" class="ExpandSignClassProd" style="float:right !important; font-size: 2.5rem; margin-top: -11px;">+</span></span></div><div class="contentOfertasProd" id="IDcontentOfertasProd' + FirstFolderWithoutSpaceProd + '"><div class="tabs-list"><ul id="dentroexpandableProd' + FirstFolderWithoutSpaceProd + '" class="grid-container-item wt-l1-container-pow0000004579item__background__border" data-ng-init="vm.itemSizeMobile = vm.itemSizeMobile || 1;vm.itemSizeTablet = vm.itemSizeTablet || 1;vm.itemSizeDesktop = vm.itemSizeDesktop || 1;vm.itemSizeLarge = vm.itemSizeLarge || 1"></ul><div class="pagination-template" data-ng-if="vm.isPaginate" data-ng-include="vm.paginationTemplate"></div></div><div id="AddContentProd' + FirstFolderWithoutSpaceProd + '"></div></div></div>';

And I only use append for Chrome but I’m afraid for IE it’s a lot more work than this. Does anyone have any idea what I could do?