внутреннийHTML ломать комплектInterval

Question

Кто-нибудь знает, почему это происходит? Размещение изображения, а затем установка функции setInterval для его анимации. Затем добавление HTML в родительский div разбивает анимацию.

document.getElementById('whiteboard').innerHTML = '<img id="mule" src="http://childscript.com/art/mule.png" />'; //image with id mule 

csE = document.getElementById('mule'); 
setInterval(function(){ csE.style.transform = 'rotate(' + Math.floor(Math.random() * 90 -45) + 'deg)'; }, 100); 

// following line breaks the code??? 
document.getElementById('whiteboard').innerHTML += 'hey'; 

JSfiddle: http://jsfiddle.net/gt6w3dhb/

Answer 1

Потому что, когда вы заменяете innerHTML, он заменяет существующие элементы DOM.

В вашем случае переменная csE относится к йот элементу, который не существует в йоте после заменяет innerHTML

Таким образом, решение состоит в добавлении новых элементов в DOM, а не с помощью конкатенации строк из innerHTML

document.getElementById('whiteboard').innerHTML = '<img id="mule" src="http://childscript.com/art/mule.png" />'; 
 

 
csE = document.getElementById('mule'); 
 
setInterval(function() { 
 
    csE.style.transform = 'rotate(' + Math.floor(Math.random() * 90 - 45) + 'deg)'; 
 
}, 100); 
 

 
var txt = document.createTextNod('hey'); 
 
document.getElementById('whiteboard').appendChild(txt)

<div id="whiteboard"></div>