Javascript IE从数组中追加子项不工作

我的网站上有一个特定div的历史记录功能。到目前为止，一切都很顺利，我从javascript中将HTML作为字符串插入，并使用.innerHTML重新显示它们。现在我试图清理所有HTML字符串中的javascript，但我有一个问题：div的历史浏览在FF、Chrome和其他一些浏览器中工作，但在IE（8到11）中不工作，我不明白为什么。这是cloneNode（）还是我看不到的引用问题

下面是一个复制行为的小脚本，您可以在此处使用：

我的代码的工作原理如下：每次我在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
}

var cache=[]；
var i=0；
函数next（）{
var hist=document.getElementById（'history'）；
i+=1；
如果（i>4）{
i=4
};
hist.innerHTML=''；
hist.appendChild（缓存[i]）；
}
函数prev（）{
var hist=document.getElementById（'history'）；
i-=1；
if（i<0）{
i=0
};
hist.innerHTML=''；
hist.appendChild（缓存[i]）；
}
函数缓存历史（div）{
cache.push（div.cloneNode（true））；
}
函数填充（）{
对于（i=0；i<5；i++）{
var hist=document.getElementById（'history'）；
hist.innerHTML=''；
var Mydiv=document.createElement（'div'）；
Mydiv.innerHTML=i；
历史附属儿童（Mydiv）；
cacheInHistory（Mydiv）；
}
i=4
}

我试图简化您的代码：

在函数populate（onload）中，创建并填充阵列缓存。作为最后一个操作，附加您的孩子

在下一个或上一个函数中，使用replaceChild而不是append和remove innerHTML

var cache=[]；
var i=0；
函数next（）{
var hist=document.getElementById（'history'）；
i=（++i>4）？4:i；
hist.replaceChild（缓存[i]，历史子对象[0]）；
}
函数prev（）{
var hist=document.getElementById（'history'）；
i=（-i<0）？0:i；
hist.replaceChild（缓存[i]，历史子对象[0]）；
}
函数缓存历史（div）{
cache.push（div.cloneNode（true））；
}
函数填充（）{
var hist=document.getElementById（'history'）；
对于（i=0；i我试图简化您的代码：

在函数populate（onload）中，创建并填充数组缓存。作为最后一个操作，附加您的子对象

在下一个或上一个函数中，使用replaceChild而不是append和remove innerHTML


var cache=[]；
var i=0；
函数next（）{
var hist=document.getElementById（'history'）；
i=（++i>4）？4:i；
hist.replaceChild（缓存[i]，历史子对象[0]）；
}
函数prev（）{
var hist=document.getElementById（'history'）；
i=（-i<0）？0:i；
hist.replaceChild（缓存[i]，历史子对象[0]）；
}
函数缓存历史（div）{
cache.push（div.cloneNode（true））；
}
函数填充（）{
var hist=document.getElementById（'history'）；
对于（i=0；i）您没有附加克隆，您只是附加了一个缓存元素。将在所有浏览器中工作。无论如何，您的原始代码实际上不应该在任何浏览器中工作，因为
appendChild
应该“剪切”它附加的元素，尽管它在变量或数组中。这在IE中更奇怪，但缓存的div元素仍然存在。你没有附加克隆，你只是附加了一个缓存的元素。在所有浏览器中都能工作。无论如何，你的原始代码实际上不应该在任何浏览器中工作，因为
appendChild
应该是这样的“剪切”它附加的元素，尽管它在变量或数组中。这在IE中更奇怪，但缓存的div元素仍然存在。