IE11 не сохраняет ‹option› innerHTML

Копипаста из моего текущего тема MSDN, которая на самом деле никуда не денется...

У меня есть каскадный раскрывающийся плагин для jQuery, который создает массив всех фильтруемых в дочернем элементе, и когда родитель изменяется, дочерний элемент очищается, а затем повторно добавляется каждое совпадение. Нигде не было никаких проблем... до IE11, который не сохраняет innerHTML. Дочерний элемент выполняет фильтрацию правильно, так как сохраняется значение каждого , но не текст, в результате чего получается следующее: http://i.imgur.com/FVNJybj.png

Точно так же вы можете заметить, что пейджер говорит, что есть 4 элемента, но ничего не отображается. Эти данные загружаются через вызов AJAX, создается строка HTML, которая затем вставляется с помощью jQuery.html(). Я добавил код отладки, чтобы убедиться, что IE11 действительно правильно строит строку, однако в DOM фактически вводятся только элементы. Это можно увидеть здесь: [1]

Выбранная строка в консоли представляет собой сконструированную строку HTML, напечатанную через console.log() перед вставкой в ​​DOM. Со стула мне кажется, что IE11 просто неправильно реализует функции управления HTML. Точно такое же поведение наблюдается при использовании либо строк HTML, либо квалифицированных объектов.

Это системная проблема. Из-за этого наша CRM непригодна для использования в IE11, а с этой функциональностью у IE6 даже не было проблем. Firefox и Chrome предсказуемо работают так, как ожидалось.

С тех пор я изменил плагин, чтобы использовать только vanilla JS при манипулировании , но поведение остается прежним. Ниже [2] приведен снимок экрана, который демонстрирует, что IE11 на самом деле правильно фильтрует и просто не сохраняет innerHTML при создании исходного объекта cascades, поскольку SO не позволяет мне публиковать все нужные мне ссылки.

Живая демонстрация также включена в комментарий ниже.

Кто-нибудь когда-нибудь видел это раньше? Любые идеи?


javascript internet-explorer-11 innerhtml
person timeshifter08    schedule 11.02.2014    source источник
comment
[1] i.imgur.com/AxFYc7J.png [2] i.imgur.com/4DymoGT.png демо: dl.dropboxusercontent.com/u/7820717/html/demo4.html   -  person timeshifter08    schedule 12.02.2014

Ответы (4)


arrow_upward
1
arrow_downward

Догадаться. В IE .innerHTML — это ссылочный вызов; в любом другом браузере он возвращает плоское значение.

person timeshifter08    schedule 12.02.2014
comment
Каково было решение? - person Jimmyt1988; 20.03.2014
comment
@ Jimmyt1988, я знаю, что это довольно старый, но для потомков эквивалентом было бы использование textContent - person Srii; 01.08.2014

arrow_upward
0
arrow_downward

Я столкнулся с похожей проблемой, описанной timeshifter08. Я сделал базовый сценарий, в котором этот неожиданный результат легко воспроизводится.

Как обсуждалось ранее, IE11 будет очищать/очищать дочерние узлы элемента, для которого атрибут innerHTML имеет значение ''. Предварительное удаление дочернего элемента (детей) элемента работает как возможный обходной путь для ситуаций, когда вы все еще можете это сделать.

Эта скрипта дает разные результаты в Chrome и Firefox по сравнению с 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 :(
person atamon    schedule 11.03.2016

arrow_upward
0
arrow_downward

Если вы планируете удалить дочерние узлы с помощью innerHTML = ''; а затем вставьте обратно, используя appendChild, это не будет работать в IE11, так как IE11 очищает innerHTML любых дочерних узлов, хранящихся в переменных.

Например

<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

// Чтение комментариев внутри кода Следовательно, используйте parent.textContent = ''; вместо

person Chetan Chandrashekar    schedule 21.10.2019

arrow_upward
0
arrow_downward

Для IE11 используйте textContent вместо innerHTML, если вы хотите получить дочерний HTML-контент для любой замены/appendChild.

person Emisael Carrera    schedule 17.12.2019