IE appendChild из массива не работает

У меня есть функция истории для определенного, div на моем сайте. До сих пор все работало хорошо, я вставлял HTML как строки из javascript и повторно отображал их с помощью .innerHTML. Теперь я пытаюсь очистить javascript от всех строк HTML, и у меня есть эта проблема: просмотр истории работы div в FF, Chrome и некоторых других, но не IE (с 8 по 11), не может понять, почему. Это cloneNode() или ссылочная проблема, которую я не вижу?IE appendChild из массива не работает

Ниже небольшой скрипт, чтобы воспроизвести поведение, вы можете играть с здесь: 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

Я попытался упростить код:

В функции заселить (загрузки) создать и заполнить кэш массива. В качестве последней операции добавьте своего ребенка.

В следующей или предыдущей функции используйте 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-21 20:06:58 gaetanoM

ответ

Смежные вопросы