来自数组的 IE 追加子项不起作用

IE appendChild from array not working

本文关键字：不起作用 追加 IE 数组      更新时间：2023-09-26

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

下面是一个重现行为的小脚本，你可以在这里玩：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
}

我试图简化你的代码：

在函数填充（加载）中创建并填充数组缓存。作为最后一次手术，附加你的孩子。

在下一个或上一个函数中使用 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>

相关文章：