¿Por qué mi animación se “reproduce” cuando se agrega un elemento a través de innerHTML?

Tengo un pequeño script que agrega un div llamado “doge” usando innerHTML al hacer clic en un botón en mi página, y en esta página hay un div con una animación CSS de fotogtwigs clave.

Sin embargo, cuando hago clic en el botón para agregar el div llamado “doge” en mi página, la animación CSS se “reproduce”. ¿Por qué? ¿Cómo puedo arreglar eso?

 function addHtml() { document.getElementById("wow").innerHTML += '
such wow
'; }
 @keyframes color { 10% { background: #4CAF50; } 50% { background: #3F51B5; } 100% { background: #009688; } } .myDiv { background: #000; color: #fff; animation: color 1s; } .doge { background: #F57F17; } 
 
Hi!

JSFiddle

Es porque está modificando todo el HTML del elemento cuando modifica la propiedad .innerHTML .

De acuerdo con MDN :

.innerHTML – Elimina todos los elementos .innerHTML del elemento, analiza la cadena de contenido y asigna los nodos resultantes como elementos .innerHTML del elemento.

Al hacerlo, el DOM asume que el elemento .myDiv acaba de ser agregado, lo que significa que la animación se .myDiv a reproducir. Para .appendChild() , use el método .appendChild() lugar:

Ejemplo actualizado

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

Alternativamente, como señala Teemu , también puedes usar el método .insertAdjacentHTML() :

Ejemplo actualizado

 document.getElementById("wow").insertAdjacentHTML('afterend', '
such wow
');