IE appendChild из массива не работает

У меня есть особенность истории для конкретного div на моем сайте. До сих пор все работало нормально, я вставлял HTML как строки из javascript и заново отображал их с помощью.innerHTML. Теперь я пытаюсь очистить javascript от всех строк HTML, и у меня есть эта проблема: просмотр истории div работает в FF, Chrome и некоторых других, но не в IE (8-11), не могу понять, почему. Это cloneNode() или проблема с ссылками, которую я не вижу?

Ниже приведен небольшой скрипт для воспроизведения поведения, с которым вы можете поиграть здесь: http://jsfiddle.net/yvecai/7e8tksm3/

Мой код работает следующим образом: каждый раз, когда я отображаю что-то в Mydiv, я клонирую его и добавляю в массив.

Функция prev() или next() добавляет соответствующие узлы из массива для отображения.

Сценарий сначала создает 5 содержимого '1' ... '5', которое пользователь может отобразить с помощью функций prev() и next(). В IE, когда вы идете prev(), затем next(), отображаются только первая и последняя записи. В других браузерах проблем нет.

var cache = [];
var i = 0;

function next() {
  var hist = document.getElementById('history');
  i += 1;
  if (i > 4) {
    i = 4
  };
  hist.innerHTML = '';
  hist.appendChild(cache[i]);
}

function prev() {
  var hist = document.getElementById('history');
  i -= 1;
  if (i < 0) {
    i = 0
  };
  hist.innerHTML = '';
  hist.appendChild(cache[i]);
}

function cacheInHistory(div) {
  cache.push(div.cloneNode(true));
}

function populate() {
  for (i = 0; i < 5; i++) {
    var hist = document.getElementById('history');
    hist.innerHTML = '';

    var Mydiv = document.createElement('div');
    Mydiv.innerHTML = i;
    hist.appendChild(Mydiv);
    cacheInHistory(Mydiv);
  }
  i = 4
}
Источник

1 ответ

Я попытался упростить ваш код:

В функции заполнить (onload) создать и заполнить массив кешем. В качестве последней операции добавьте вашего ребенка.

В вашей следующей или предыдущей функции используйте replaceChild вместо добавления и удаления innerHTML.

var cache=[];
var i = 0;

function next(){
  var hist = document.getElementById('history');
  i = (++i > 4) ? 4 : i;
  hist.replaceChild(cache[i], hist.children[0]);
}
function prev(){
  var hist = document.getElementById('history');
  i = (--i < 0) ? 0 : i;
  hist.replaceChild(cache[i], hist.children[0]);
}

function cacheInHistory(div){
  cache.push(div.cloneNode(true));
}
function populate(){
  var hist = document.getElementById('history');
  for (i=0 ; i<5 ; i++){
    hist.innerHTML='';

    var Mydiv = document.createElement('div');
    Mydiv.innerHTML = i;
    cacheInHistory(Mydiv);
  }
  i = 4
  hist.appendChild(cache[i]);
}
<body onload="populate();">
<div id="prev" onclick="prev()">
    prev
</div>
<div id="next" onclick="next()">
    next
</div>
<hr/>
<div id="history">
</div>
</body>

Источник
Другие вопросы по тегам