点击按钮时如何仅为新生成的Hello元素添加slideInLeft动画？

点击按钮时，希望仅让新生成的“Hello”消息触发slideInLeft动画，但目前每次点击，所有已存在的元素都会重复播放该动画，如何修复？

原JavaScript代码 #

var i = 0;
//点击按钮时触发的函数
function toast() {
    let toastDom = document.getElementById('toast');
    toastDom.innerHTML += `
        <div class="box${i}">
          Hello
        </div>
    `;

    const j = i;
    let toastEle = document.querySelector(`.box${j}`);
    toastEle.style.animation = `slideInLeft ease .3s`;
    i++;
}

修复方案 #

问题根源在于使用innerHTML +=时，浏览器会重新解析并渲染整个父容器（#toast）内的所有元素，这会导致已存在的元素重新触发动画。正确的做法是直接创建新元素并追加到父容器，避免重新渲染已有内容：

修改后的代码：

var i = 0;
function toast() {
    let toastDom = document.getElementById('toast');
    // 创建新的div元素
    const newBox = document.createElement('div');
    newBox.className = `box${i}`;
    newBox.textContent = 'Hello';
    // 给新元素设置动画
    newBox.style.animation = `slideInLeft ease .3s`;
    // 将新元素追加到父容器，不会影响已有元素
    toastDom.appendChild(newBox);
    i++;
}

补充说明 #

• 使用createElement和appendChild只会在DOM中添加新节点，不会触动已有节点的渲染状态，因此已存在的元素不会重新触发动画。
• 如果需要给动画添加结束后的逻辑（比如自动移除元素），可以通过newBox.addEventListener('animationend', ...)来实现。

内容的提问来源于stack exchange，提问作者Znone