IE appendChild from array not working

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

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

来源

2016-02-21 yvecai

你不追加克隆，你只是附加一个缓存元素。 [追加克隆]（http://jsfiddle.net/syx91c2v/）将适用于所有浏览器。无论如何，你的原始代码实际上不应该在任何浏览器中工作，因为'appendChild'应该“剪切”它所添加的元素，尽管它存在于一个变量或数组中。这在IE中更奇怪，只有[缓存元素的内容被削减]（http://jsfiddle.net/yy4aht3u/），但缓存的div元素仍然存在。 – Teemu

我试图简化代码：

在功能填入（onload事件）创建和填充阵列高速缓存。随着最后的操作追加你的孩子。

在您的下一个或上一个函数中，使用replaceChild代替append和remove 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-21 20:06:58 gaetanoM

IE appendChild from array not working

回答

相关问题