innerHTML 打破 setInterval

【问题标题】：innerHTML breaking setIntervalinnerHTML 打破 setInterval
【发布时间】：2015-09-01 09:56:15
【问题描述】：

有人知道为什么会这样吗？放置图像，然后设置 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/

【问题讨论】：

标签： javascript setinterval innerhtml

【解决方案1】：

因为当您替换 innerHTML 时，它正在替换现有的 dom 元素。

在您的情况下，csE 变量是指替换 innerHTML 后 dom 中不存在的 dom 元素

所以解决方法是把新元素追加到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)

&lt;div id="whiteboard"&gt;&lt;/div&gt;

【讨论】：