Search code examples
javascripthtmlinternet-explorer-11

IE11 Form Templating, innerHTML & outerHTML issue

I made a big form and I need a little templating to get it to work. Like so

Before

After

So I want to have an HTML DIV in my HTML code with the id="sponsor_template", read it and add it to the button. Here is my js-code 

var sponsorBTN = document.querySelector('[name="sponsors_add"]');
if (sponsorBTN !== null) {
    sponsorBTN.addEventListener('click', function () {
        var s_template = document.querySelector('[id="sponsor_template"]');
        sponsorBTN.insertAdjacentHTML('beforeBegin', s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"')
                                                               .replace('display:none', ''))
    })
}

It works perfectly on any browser except for IE.
The only thing I know, where the issue could be is innerHTML / outerHTML because my output is incomplete when I console.log them in IE. So it just cuts off after the 7'th line of HTML.

Here is the JSFiddle to this issue: https://jsfiddle.net/tdxkiller/b5m0t7xm/

Solution

  • This line is your problem:

    s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"').replace('display:none', '')

    I'm not sure why it has a problem with "display:none"; I think there's some problem with the ":" character. However, I changed it to the below and it worked:

    s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"').replace('none', 'block')