आंतरिक एनीमेशन के माध्यम से कोई तत्व जोड़ा जाने पर मेरी एनीमेशन "रीप्लेड" क्यों होती है?

Question

मेरे पास एक छोटी सी स्क्रिप्ट है जो मेरे पृष्ठ पर एक बटन पर क्लिक करते समय innerHTML का उपयोग करके "कुत्ते" नामक एक div जोड़ती है, और इस पृष्ठ पर एक सीएसएस कीफ्रेम एनीमेशन के साथ एक div है।

हालांकि, जब मैं अपने पृष्ठ पर "कुत्ते" नामक div जोड़ने के लिए बटन पर क्लिक करता हूं, तो सीएसएस एनीमेशन "पुनः चलाया जाता है"। क्यूं कर? मैं कैसे इसे ठीक कर सकता हूं?

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

यह क्योंकि तुम तत्व के HTML के सभी जब आप .innerHTML संपत्ति को संशोधित को संशोधित कर रहे हैं।

MDN के अनुसार:

.innerHTML - तत्व के बच्चों के सभी निकालता है, सामग्री स्ट्रिंग पार्स करके तत्व के बच्चों के रूप में जिसके परिणामस्वरूप नोड्स प्रदान करती है।

ऐसा करने में, डोम मानता है कि .myDiv तत्व अभी जोड़ा गया है जिसका अर्थ है कि एनीमेशन को फिर से चलाने जा रहा है।

Updated Example

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

---

वैकल्पिक रूप से, Teemu points out के रूप में, आप भी .insertAdjacentHTML() method उपयोग कर सकते हैं: कि हल करने के लिए, .appendChild() method बजाय का उपयोग

Updated Example

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