Question

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

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

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

函数prev（）或next（）附加数组中的相应节点以供显示。

该脚本首先创建5个内容＆＃39; 1＆＃39; ......＆＃39; 5＆＃39;用户可以使用函数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
}

Answer 1

我尝试简化您的代码：

在函数populate（onload）中创建并填充数组缓存。最后一次操作会附加你的孩子。

在你的下一个或上一个函数中使用replaceChild而不是append并删除innerHTML。

＆＃13;

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]);
}

＆＃13;

<body onload="populate();">
<div id="prev" onclick="prev()">
    prev
</div>
<div id="next" onclick="next()">
    next
</div>
<hr/>
<div id="history">
</div>
</body>

＆＃13;

来自数组的IE appendChild不工作

1 个答案: