javascript - 配列のIE appendChildが機能しない

Question

私のウェブサイトには、特定の div の履歴機能があります。今まではすべて問題なく動作していました。JavaScript から HTML を文字列として挿入し、.innerHTML で再表示していました。今、私はすべての HTML 文字列から JavaScript をクリーンアップしようとしていますが、この問題があります: div の履歴閲覧は FF、Chrome などで機能しますが、IE (8 から 11) では機能しません。理由がわかりません。それは cloneNode() ですか、それとも参照の問題ですか?

以下は、動作を再現するための小さなスクリプトです。ここで遊ぶことができます: http://jsfiddle.net/yvecai/7e8tksm3/

私のコードは次のように動作します: Mydiv に何かを表示するたびに、それを複製して配列に追加します。

関数 prev() または next() は、表示のために配列から対応するノードを追加します。

スクリプトは最初に、ユーザーが関数 prev() および next() で表示できる 5 つのコンテンツ '1' ... '5' を作成します。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
}