CODEWITHSUNDEEP
javascriptinnerhtmlinternet-explorer-11
timeshifter08
timeshifter08

Reputation: 31

IE11 not storing <option> innerHTML

Copypasta from my ongoing MSDN thread that's not really getting anywhere...

I have a cascading drop-down plugin for jQuery that creates an array of every filterable in the child , and when the parent is changed, the child is purged and then every matching is re-added. Hasn't had any issues anywhere... until IE11, which doesn't save the innerHTML. The child does filter correctly, as each 's value is preserved, but the text isn't, resulting in this: https://i.sstatic.net/0ALGc.png

Similarly, you may notice that the pager says there are 4 items, but nothing is displayed. That data is loaded via an AJAX call, and an HTML string is constructed, then inserted with jQuery.html(). I've put in debug code to verify that IE11 is in fact constructing the string correctly, however, only the elements are actually injected into the DOM. This can be seen here: [1]

The selected line in the console is the constructed HTML string printed via console.log() the line prior to inserting into the DOM. From my chair, it looks to me like IE11 is simply implementing HTML control functions incorrectly. The exact same behavior is apparent when using either HTML strings or qualified objects.

This is a system-breaking problem. Our CRM is unusable in IE11 because of this, and this is functionality that IE6 didn't even have a problem with. Firefox and Chrome predictably work as expected.

I've since modified the plugin to use only vanilla JS when manipulating the , but the behavior remains identical. Below [2] is a screenshot that demonstrates that IE11 is in fact filtering correctly, and is just not storing the 's innerHTML when the initial cascades object is created, since SO won't let me post all the links I need to.

Live demo also included in the comment below.

Anyone ever seen this before? Any ideas?

Upvotes: 1

Views: 2045

Answers (4)

Emisael Carrera
Emisael Carrera

Reputation: 687

For IE11 use textContent instead innerHTML if you want to get the children html content for any replacement/appendChild too.

Upvotes: 0

Chetan Chandrashekar
Chetan Chandrashekar

Reputation: 198

If you plan to remove child nodes using innerHTML = ''; and then insert back using appendChild this won't work in IE11, as IE11 clears the innerHTML of any child nodes stores in variables.

For example 

<div id="parent">
    <div id="child">
       <div id="grandchild">
       </div>
    </div>
</div>
var child = document.getElementById('child');
var parent = document.getElementById('parent');
parent.innerHTML = ''; // this line will clear the innerHTML of child object
parent.appendChild(child); // will be broken

// Read comments inline in code Hence use parent.textContent = ''; instead

Upvotes: 0

atamon
atamon

Reputation: 23

I ran into a similiar issue as described by timeshifter08. I made a basic scenario in which this unexpected result is easily reproduced.

As discussed earlier IE11 will empty/clear child nodes of an element that has its innerHTML attribute set to ''. Removing the child(ren) of the element beforehand works as a possible workaround for situations where you might still want to do this.

This fiddle produce different results in Chrome and Firefox, vs. IE11 https://jsfiddle.net/gv2xqt6d/7/

    <div id="div">
      <span id="span">
        Span
        <p id="p">P</p>
      </span>
    </div>

    ------------------------

    var div = document.querySelector('#div')
    var span = document.querySelector('#span')

    var p = document.querySelector('#p')  

    // div.removeChild(span); // <- Workaround
    div.innerHTML = '';
    div.appendChild(span);

    console.log(span.innerHTML); // Logs nothing in IE11 :(

Upvotes: 0

timeshifter08
timeshifter08

Reputation: 31

Figured it out. In IE, .innerHTML is a reference call; in every other browser, it returns a flat value.

Upvotes: 1

Related Questions