Categories
discuss

IE 11 is ignoring appendChild() for dynamically generated html pages

I am trying to create a pseudo report that shows me errors from importing data. to do this I have two functions: let createHtmlErrorReport = (err) => { let …

I am trying to create a pseudo report that shows me errors from importing data. to do this I have two functions:

                let createHtmlErrorReport = (err) => {

                    let currentDate = new Date().toLocaleString();
                    let contents = '<!DOCTYPE html> ' +
                        '<html>' +
                        '<head>' +
                        '<title>Import Inventory Import</title>' +
                        '<meta charset="utf-8" />' +
                        '<meta http-equiv="Content-Language" content="en">' +
                        '<style type="text/css">' +
                        ' html { margin:0;  }' +
                        ' body { background-color:#d6d6d6; font: 10pt sans-serif;}' +
                         'ul li{ padding: 3px; font:12pt;}'+
                        ' #header {padding:10px; background-color:#007fcc; color:#ffffff; } ' +
                        '</style>' +
                        '</head>' +
                        '<body>' +
                        '<div id="header">'+
                        '<strong>Import Inventory Import</strong>' +
                        '</div>' +
                        '<p><strong>Imported ' + currentDate + ' by ' + err.username + ' | ' + err.unprocessedItemsCount + ' items not imported | ' + err.processedItemsCount + ' items imported | '+ err.errorMessages.length + ' errors.</strong></p>'+
                        '<p>The following errors occured during import: </p>'+
                        '<div id="errorList" style="padding:5px;"></div>'+
                        '</body>' +
                        '</html>';
                    return contents;

                }

In the above I create a new document, add some basic styling and then create div container where I want a list of errors to be inserted.

<div id="errorList" style="padding:5px;"></div> 

The next function calls this method and builds the error list

            let generateImportErrorReport = (errors) => {
                        let doc = createHtmlErrorReport(errors);
                        let errorReportWindow = window.open('', '_blank');
                        errorReportWindow.document.write(doc);
                        let list = document.createElement('ul');
                        //builds a list of errors 
                        for (let i = 0; i < errors.errorMessages.length; i++) {
                            let item = document.createElement('li');
                            let message = errorReportWindow.document.createTextNode(errors.errorMessages[i]);           
                            item.appendChild(message);
                            list.appendChild(item);;
                        }  
}

The list is nothing more than an array of strings:

errors.errorMessages = [
{'Message 1'},
{'Message 2'}
]

This code works fine in Chrome and Firefox however in IE the new document is generated but the list is never appended to the selected Element. I can see the element generated but it will not add to the newly created document.

Internally the IE dev tools captures a generic message of Error: No such interface supported

I’ve seen other SO postings of similar problems but no solution that fits my scenario as I’m generating the html, and document at the same time vs working with an existing document.

Edit**: This code while standard js is written in typescript as part of an angular application. The TS is generated as ECMA3 and using either arrow functions or standard notation generates the same result.

I’d appreciate any suggestions or pointers on what I am missing.

Answer

To make it work in IE 11, you can follow Mirko Cianfarani’s suggestion: create the dynamic elements with the document object to which these elements will be appended. In your case, that is the document of the new report window, errorReportWindow.document. The report document should also be closed at the end.

var generateImportErrorReport = function(errors) {
  let doc = createHtmlErrorReport(errors);
  let errorReportWindow = window.open('', '_blank');
  let errorDoc = errorReportWindow.document; // Get the error report document object
  errorDoc.write(doc);
  let list = errorDoc.createElement('ul'); // Create with errorDoc
  // Builds a list of errors
  for (let i = 0; i < errors.errorMessages.length; i++) {
    let item = errorDoc.createElement('li'); // Create with errorDoc
    let message = errorDoc.createTextNode(errors.errorMessages[i]); // Create with errorDoc
    item.appendChild(message);
    list.appendChild(item);;
  }
  var errorList = errorDoc.getElementById('errorList');
  errorList.appendChild(list);
  errorDoc.close(); // Close the document
}

You can test the code in these two plunkers:

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..