क्या इंटरनेट एक्सप्लोरर 9/10 में आंतरिक HTML = "" के साथ कोई बग है?

Question

मैं अक्सर एक तत्व की सामग्री स्पष्ट करने के लिए निम्नलिखित कोड का उपयोग करें:

div.innerHTML = ""; 

लेकिन मैं इंटरनेट एक्सप्लोरर पर एक Stange व्यवहार का पता चला। ऐसा लगता है कि div के सभी बच्चों को भी अपने बच्चों को हटा दिया! अगर मैं ऊपर दिए गए div के बच्चे के संदर्भ में रहता हूं, div.innerHTML = ""; करने के बाद, बच्चे का टेक्स्ट नोड अब बच्चे में नहीं है।

निम्नलिखित कोड इस व्यवहार का सबूत (http://jsfiddle.net/Laudp273/) है:

function createText() { 
    var e = document.createElement("div"); 
    e.textContent = "Hello World!"; 
    return e; 
} 

var mrk = document.createElement("div"); 
mrk.appendChild(createText()); 
mrk.style.border = "4px solid yellow"; 

var container = null; 

function addDiv() { 
    if (container) { 
     container.innerHTML = ""; 
    } 
    var e = document.createElement("div"); 
    e.appendChild(mrk); 
    container = e; 
    document.body.appendChild(e); 
} 

var btn = document.createElement("button"); 
btn.textContent = "Add marker"; 
btn.addEventListener(
    "click", 
    function() { 
     addDiv(); 
    }, 
    false 
); 
document.body.appendChild(btn); 

आप दो बार "मार्कर जोड़ें" बटन पर क्लिक करें, तो आप एक खाली पीला आयत के बजाय texte साथ एक देखेंगे " हैलो वर्ड! "।

क्या यह एक बग या विनिर्देश फ़ायरफ़ॉक्स और न ही Google क्रोम द्वारा उपयोग किया जाता है?

Answer 1

यह बहुत ही रोचक व्यवहार है, और आईई 8 और आईई 11 पर भी होता है। IE पर अपने बच्चे को पाठ नोड खो देता है

var span = document.createElement('span'); 
 
span.appendChild(document.createTextNode("This disappears on IE")); 
 

 
var div = document.createElement('div'); 
 
div.appendChild(span); 
 
snippet.log("[before] span's childNodes.length: " + span.childNodes.length); 
 
div.innerHTML = ""; 
 
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

की स्थापना div के innerHTML"" को, span हम एक संदर्भ रखा के बाद करने के लिए, और अन्य पर नहीं: यहाँ एक नहीं बल्कि सरल परीक्षा/सबूत है ब्राउज़रों।

var span = document.createElement('span'); 
 
span.appendChild(document.createTextNode("This disappears on IE")); 
 

 
var div = document.createElement('div'); 
 
div.appendChild(span); 
 
snippet.log("[before] span's childNodes.length: " + span.childNodes.length); 
 
div.innerHTML = "New content"; // <== Not "" 
 
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

What little we have in the way of a spec for innerHTML क्या होना चाहिए पर काफी अस्पष्ट है:

We're not the only ones to notice this and find it, um, inappropriate.

यह या तो "", होना करने के लिए नहीं है, किसी नई सामग्री बग का कारण बनता है पुरानी सामग्री, लेकिन निश्चित रूप से यह गलत है, भले ही माइक्रोसॉफ्ट आविष्कार innerHTML ।

जबकि removeNode के माध्यम से नोड्स को हटाने के इस व्यवहार का कारण नहीं है:

var span = document.createElement('span'); 
 
span.appendChild(document.createTextNode("This disappears on IE")); 
 

 
var div = document.createElement('div'); 
 
div.appendChild(span); 
 
snippet.log("[before] span's childNodes.length: " + span.childNodes.length); 
 
while (div.firstChild) { 
 
    div.removeChild(div.firstChild); 
 
} 
 
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

आह