当通过 innerHTML 添加元素时，为啥我的动画会“重播”？

Posted 2023-05-07

【中文标题】当通过 innerHTML 添加元素时，为啥我的动画会“重播”？

【英文标题】：Why is my animation "replayed" when an element is added via innerHTML?当通过 innerHTML 添加元素时，为什么我的动画会“重播”？

【发布时间】：2016-03-27 20:30:25

【问题描述】：

我有一个小脚本，当单击我页面上的按钮时，我使用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

【参考方案1】：

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

根据MDN：

.innerHTML - 删除元素的所有子元素，解析内容字符串并将结果节点分配为元素的子元素。

这样做时，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>');

【讨论】：

@MrZrn 查看我的答案中的链接。

工作，但没有直接添加我的html代码的解决方案？喜欢 innerHtml 吗？

@MrZrn Actually there is，但我仍然更喜欢 Josh 的代码作为向页面添加内容的主要方法。