Czy jest błąd w przeglądarce Internet Explorer 9/10 z innerHTML = ""?

Question

często używam następujący kod, aby usunąć zawartość elementu:

div.innerHTML = ""; 

Ale znalazłem zachowanie Stange na Internet Explorer. Wygląda na to, że wszystkie dzieci w dziale otrzymują również swoje własne dzieci! Jeśli zachowam odniesienie do elementu potomnego elementu div powyżej, po wykonaniu div.innerHTML = ""; węzeł tekstu dziecka nie znajduje się już w elemencie potomnym.

Poniższy kod jest dowodem tego zachowania (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); 

Po kliknięciu na przycisk „Dodaj znacznik” dwa razy, widać pustą żółty prostokąt zamiast jednego z texte " Cześć słówka! ".

Czy błąd lub specyfikacja nie są używane przez Firefox ani Google Chrome?

Answer 1

To bardzo interesujące zachowanie, a dzieje się również na IE8 i IE11. Oto raczej prostszy test/dowód:

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>

Po ustawieniu div „s innerHTML do "" The span trzymaliśmy odniesienie do traci swoje dziecko węzeł tekstowy na IE, a nie na inne przeglądarki.

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

To nie musi być "", albo każda nowa treść powoduje błąd:

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 jest dość niejasne, co powinno nastąpić do stara treść, ale z pewnością jest to błędne, nawet jeśli Microsoft wykonał wymyślić innerHTML .

co następuje usunięcie węzłów poprzez removeNode nie powoduje to zachowanie:

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>

westchnienie