Why doesn't innerHTML redraw the page in IE?

A

Artem Shchurin2015-08-04 12:14:40

JavaScript

Artem Shchurin, 2015-08-04 12:14:40

Hello!
According to the task, I need to change the content inside the text tag, then measure the length and do some calculations, in Chrome, FF everything is buzzing, problems only in IE
I gave an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
    <span>Span</span>
    <svg width="620" height="100">
      <text x="30" y="90" fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">Text</text>
    </svg>
  </body>
  <script>
    var text = document.getElementsByTagName('text')[0];
    var span = document.getElementsByTagName('span')[0];

    console.log('text length1: ' + text.getComputedTextLength());
    text.innerHTML = 'NewText'
    span.innerHTML = 'NewText'
    console.log('text: ' + text.innerHTML);
    console.log('span: ' + span.innerHTML);
    console.log('text length2: ' + text.getComputedTextLength());
  </script>
</html>

in the IE console it gives the following results:
text length1: 228.91000366210937
text: NewText
span: NewText
text length2: 228.91000366210937
despite the fact that on the page, apparently in text, the value has not changed, in fact, how and how long
can innerHTML be replaced with?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Anatoly Sidorov, 2015-08-04
@schurin

text.textContent = 'NewText';
jsfiddle.net/heL0114p/1
That's why stackoverflow.com/questions/4282108/how-to-change-...

M

Mak Alexey, 2015-08-04
@S-ed

For those who don't have enoughtextContent

https://github.com/dnozay/innersvg-polyfill