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

回答

相關問題