来自数组的 IE appendChild 不起作用答案

【问题标题】：IE appendChild from array not working来自数组的 IE appendChild 不起作用
【发布时间】：2016-02-21 19:41:38
【问题描述】：

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

下面是一个重现行为的小脚本，你可以在这里玩：http://jsfiddle.net/yvecai/7e8tksm3/

我的代码工作如下：每次我在 Mydiv 中显示某些内容时，我都会克隆它并将其附加到一个数组中。

函数 prev() 或 next() 从数组中追加相应的节点进行显示。

脚本首先创建 5 个内容 '1' ... '5'，用户可以使用函数 prev() 和 next() 显示这些内容。在 IE 中，当你执行 prev(), then 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
}

【问题讨论】：

你不是在附加一个克隆，你只是在附加一个缓存的元素。 Appending a clone 适用于所有浏览器。无论如何，您的原始代码实际上不应该在任何浏览器中工作，因为 appendChild 应该“剪切”它附加的元素，尽管它位于变量或数组中。哪个在IE里比较奇怪，只有the content of cached elements is cut，但是缓存的div元素还在。

标签： javascript internet-explorer appendchild clonenode

【解决方案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>

【讨论】：