1

我的网站上有一个特定的 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()，然后执行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
}
4

1 回答 1

0

我试图简化您的代码：

在函数填充（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>

于 2016-02-21T20:06:58.517 回答