innerHTML does not work in IE 10

Question

i have IE 10 and i have svg image. In svg I put TEXT element with

var newElement = function(name, attr) {
var svgNS = "http://www.w3.org/2000/svg";  
var tmp = document.createElementNS(svgNS, name);
for (k in attr) {
    if (k === 'style') {
        for (s in attr[k]) {
            tmp.style[s] = attr[k][s]; 
        }
    } else if (k === 'innerHTML') {
        console.log('Break 1('+typeof(attr[k])+')'+ attr[k]);
        console.log('Break 2: '+tmp.innerHTML);
        tmp.innerHTML = attr[k];
        console.log('Break 3: '+tmp.innerHTML);
    } else {
        tmp.setAttributeNS(null, k, attr[k]);
    }
}

console.log('Break 4: ');
console.log(tmp);
return tmp;

};

And i cant see placed text in IE only. In FF and Chrome it works correctly. In source i can see empty text element, but text element have attributes.

It's log from IE Console:

Break 1(string)Coś tam Marzec: 158
Break 2: undefined
Break 3: Coś tam Marzec: 158
Break 4: 
<text id="1135198_point_2_desc" font-size="11" visibility="hidden" text-anchor="middle" x="204.8182" y="209.68"></text>

Firefox console:

Break 1(string)Legenda Pionowa
svg.html (wiersz 50)
Break 2:
svg.html (wiersz 51)
Break 3: Legenda Pionowa
svg.html (wiersz 53)
Break 4:
svg.html (wiersz 59)
<text x="0" y="130" text-anchor="middle" fill="#000000" transform="rotate(-90, 20, 130)">

And in firefox text is inside TEXT element

See [this question](http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element). Basically it boils down to `innerHTML` being a member of `HTMLElement`. The fact that it works in Chrome/Firefox is because they have added this non-standard method to `SVGElement`. — Phylogenesis, Feb 19 '15 at 11:17
Untrue that it's non-standard: https://dvcs.w3.org/hg/innerhtml/raw-file/tip/index.html says it's on Element and SVGElement derives from Element (as does HTMLElement) also untrue that we've added it to SVGElement (we added it to Element as the standard tells us to) — Robert Longson, Feb 19 '15 at 11:55
I deal a lot with intranet/corp. users so forgive me if this is not you...I see it all the time in my world. You are using IE10, but is your browser running IE10? Hit F12 and look up your document mode. Guessing it's forced to compatibility or IE8, so SVG not working. — Robert Campbell, Mar 03 '15 at 04:46

score 1 · Accepted Answer · edited Mar 04 '15 at 09:34

1

Ok I solved my problem. I used https://code.google.com/p/innersvg/ and I replaced innerHTML to innerSVG

edited Mar 04 '15 at 09:34

BoltClock

700,868
160
1,392
1,356

answered Feb 19 '15 at 11:13

Daniel Hornik

1,957
1
14
33

innerHTML does not work in IE 10

1 Answers1