javascript - 为什么通过 innerHTML 添加元素时我的动画是 "replayed"？

Question

我有一个小脚本，当我点击我页面上的按钮时使用 innerHTML 添加一个名为“doge”的 div，并且在这个页面上有一个带有 CSS 关键帧动画的 div。

但是，当我单击按钮在我的页面上添加名为“doge”的 div 时，CSS 动画被“重播”。为什么？我该如何解决？

function addHtml() {
    document.getElementById("wow").innerHTML += '<div class="doge">such wow</div>';
}

@keyframes color {
    10% {
        background: #4CAF50;
    }
    50% {
        background: #3F51B5;
    }
    100% {
        background: #009688;
    }
}

.myDiv {
    background: #000;
    color: #fff;
    animation: color 1s;
}

.doge {
    background: #F57F17;
}

<div id="wow">
    <div class="myDiv">Hi!</div>
    <br>
    <button onclick="addHtml()">Add HTML!</button>
</div>

JSFiddle

Answer 1

这是因为当您修改 .innerHTML 属性时，您正在修改元素的所有 HTML。

根据 MDN :

.innerHTML - Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.

这样做时，DOM 假定刚刚添加了 .myDiv 元素，这意味着将要重播动画。要解决此问题，请使用 .appendChild() method相反:

Updated Example

var div = document.createElement('div');
div.textContent = 'such wow';
div.className += 'doge';
document.getElementById("wow").appendChild(div);

---

或者，作为 Teemu points out , 你也可以使用 .insertAdjacentHTML() method :

Updated Example

document.getElementById("wow").insertAdjacentHTML('afterend', '<div class="doge">such wow</div>');