I got on my page inside a DIV with content editable on some text. In this text I need to get the value of all P elements (text written by user) but I need to exclude all span elements (variables that are not used for the rest of the work I have to do).

I tried to do it using querySelector in IE11 but here is the deal : For IE11 querySelector doesn't exist, even when I spy the element and it tell me this method exist (using F12 and putting a spy on it). What should I do to correct that ? I tried something I found on this forum that's say to put :

<meta http-equiv="X-UA-Compatible" content="IE=11" />

in the Head of the document, but it did not work.

The JS I use to do this is :

function recupTXT(div) {
  var textRecup = div.cloneNode(true);
  while (textRecup.querySelector("span") !== null) {
    textRecup.querySelector("span").parentNode.removeChild(textRecup.querySelector("span"));
  }
  return textRecup.innerText;
}

EDIT :

he is call like that :

var text = recupTXT(document.getElementById('edth_corps'));

where edth_corps is the content editable generated programmaticaly

If I try it on a stand alone, with the same condition (content editable and stuff), it work pretty fine and do what I need. But in my application it failed. So is it just a configuration issue ? or is there something I'm missing ?

I got on my page inside a DIV with content editable on some text. In this text I need to get the value of all P elements (text written by user) but I need to exclude all span elements (variables that are not used for the rest of the work I have to do).

I tried to do it using querySelector in IE11 but here is the deal : For IE11 querySelector doesn't exist, even when I spy the element and it tell me this method exist (using F12 and putting a spy on it). What should I do to correct that ? I tried something I found on this forum that's say to put :

<meta http-equiv="X-UA-Compatible" content="IE=11" />

in the Head of the document, but it did not work.

The JS I use to do this is :

function recupTXT(div) {
  var textRecup = div.cloneNode(true);
  while (textRecup.querySelector("span") !== null) {
    textRecup.querySelector("span").parentNode.removeChild(textRecup.querySelector("span"));
  }
  return textRecup.innerText;
}

EDIT :

he is call like that :

var text = recupTXT(document.getElementById('edth_corps'));

where edth_corps is the content editable generated programmaticaly

If I try it on a stand alone, with the same condition (content editable and stuff), it work pretty fine and do what I need. But in my application it failed. So is it just a configuration issue ? or is there something I'm missing ?

• javascript
• internet-explorer

• You already mentioned X-UA-Compatible, but did you actually check what mode the browser is using? In IE devtools, go to Emulation tab; what does it say in Document Mode? – Simba Commented Dec 4, 2015 at 13:36
• Document is 5 by default – Slayner Commented Dec 4, 2015 at 13:37
• 3 Well, that's your problem then. – Simba Commented Dec 4, 2015 at 13:38
• I changed it to IE10 but now the rest throw me some error before i reach this point – Slayner Commented Dec 4, 2015 at 13:39
• Change it to Edge, not IE10. (you'll probably still get the same error as IE10 mode, but Edge is IE11 mode, so you should stick with it as much as possible... as for the new error you're getting, you'll need to ask about that separately, but you should aim to fix it rather than going back to quirks mode). Also see below for my answer on how to avoid IE5 mode (Quirks Mode) in your code. – Simba Commented Dec 4, 2015 at 13:42

2 Answers 2

You stated that the document mode is 5.

This means that IE is running in Quirks Mode. This mode is designed to emulate IE5, and as a result it disables most of the browser features invented since IE5, including querySelector.

You can resolve the problem by preventing the browser from going into Quirks Mode.

This is achieved by making sure (1) that your HTML is valid, and (2) that it has a valid doctype declaration as the first line. If you don't have a doctype, add the following to the top of your code:

<!DOCTYPE html>

Why not something like

var spans = textRecup.querySelectorAll("span");
for (var i=0;i<span.length;i++) {
  spans[i].parentNode.removeChild(spans[i]);
}

window.onload = function() {
  document.getElementById("get").onclick = function() {
    var div = document.getElementById("cnt");
    var spans = div.querySelectorAll("span");
    for (var i = 0; i < spans.length; i++) {
      spans[i].parentNode.removeChild(spans[i]);
    }
    console.log(div.innerHTML);
  }
}

<div id="cnt" contenteditable>

  <p>Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/></p>
  
</div>
<input type="button" id="get" value="get" />

Output in IE10 AND IE11 AND EDGE