Get innerHTML of svg-tag result in undefined in IE

innerhtml not working in ie11
svg innerhtml
svg text innerhtml
innersvg-polyfill
xmlserializer javascript

I'm having some trouble getting the html content of a svg-tag, with javascript in Internet Explorer.

My javascript code is as follow:

console.log($('.icon')[0].innerHTML);

and my tag in my html document:

<svg class="icon"><use>testing</use></svg>

This works well in Chrome, Firefox and what have we, but in Internet Explorer I'm left with an undefined error. Is it my mixture of Javascript and jQuery?

How come I can't seem to fetch the content of my svg-tag? I've tried some different things and often I end up with an "SCRIPT5007: Unable to set property 'innerHTML' of undefined or null reference"

Help me :) thanks in regards!

How about using XMLSerializer. Get yourself the element somehow and then do this...

console.log(new XMLSerializer().serializeToString(element));

InnerHTML property of svg-style returns undefined on IE11. · Issue , How about using XMLSerializer. Get yourself the element somehow and then do this console.log(new XMLSerializer().serializeToString(element));. Get innerHTML of svg-tag result in undefined in IE Tag: javascript , jquery , internet-explorer , svg I'm having some trouble getting the html content of a svg-tag, with javascript in Internet Explorer.

Internet Explorer doesn't currently support the innerHTML method on SVG Elements. We do however have an issue opened internally to track our consideration of this feature. In the meantime I would explore alternative solutions like the InnerSVG polyfill which allegedly works in Internet Explorer 9 and newer.

javascript Get innerHTML of svg tag result in undefined in IE?, InnerHTML property of style tag inside of svg tag returns undefined on IE11. /​28129956/get-innerhtml-of-svg-tag-result-in-undefined-in-ie  IE does not support innerHTML on SVG Elements, so we wrap the markup to make it a 'complete' svg string, pop that into a temp container node, then copy across the children of the <svg>. 👍 1

The following code will give you the content as string from the given SVG. It is based on the great answer of Robert Longson.

const svgNode = document.getElementsByTagName('svg')[0];
const serializer = new XMLSerializer();

const svgContent = Array.prototype.map.call(
  svgNode.childNodes, 
  (child) => serializer.serializeToString(child)
).join('');

Element.insertAdjacentHTML(), A hacky way perhaps? But works for me atleast. Instead of getting the raw innerhtml which I can't in IE. I try to get each element-node inside my svg-tag by doing  You are creating a jQuery object. It doesn't have innerHTML property. You should use the html method which reads the innerHTML property behind the scenes! $('.editable-div').html() – undefined Apr 3 '15 at 16:03

Eventually I found some sort of solution to this. A hacky way perhaps? But works for me atleast.

Instead of getting the raw innerhtml which I can't in IE. I try to get each element-node inside my svg-tag by doing so:

var element = document.getElementsByTagName('svg')[0].childNodes;
for (i = 0; i < element.length; i++) {
    if (element[i].nodeName != '#text') {
        console.log(element[i]);
    }
}

Node.textContent, The insertAdjacentHTML() method of the Element interface parses the specified text as or XML and inserts the resulting nodes into the DOM tree at a specified position. making it much faster than direct innerHTML manipulation. Get the latest and greatest from MDN delivered straight to your inbox. $(svgString)[0] to create a svg tag corresponding to your string. Then you can append this element where you want in the dom to draw the image. Then you can append this element where you want in the dom to draw the image.

console.log($('.icon').parent().html()); works fine for me in IE11.

The delivered string starts with a XML declaration <?xml version="1.0" encoding="iso-8859-1" ?> which seems to be handled as the parent of the svg node.

element.firstElementChild, Unlike textContent , altering innerText in Internet Explorer (version 11 innerHTML to retrieve or write text inside an element, but textContent  Hi there, I have recently been trying some code out to replace the innerHTML contents from within a table row, i am now to discover that Internet Explorer which a lot of people still use insists of making innerHTML properties read only, although the code works flawlessly in Firefox and Google Chr

document.getElementsByTagName, CSS Learn Colors Learn Icons Learn Graphics Learn SVG Learn Canvas Learn isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape() Get the HTML content of the first child element of an <ul> element: innerHTML; child element of a specified element. children[0] will produce the same result  The innerHTML property sets or returns the HTML content (inner HTML) of an element.

API Docs • Svelte, Get all elements in the document with the specified tag name: var x = document.​getElementsByTagName("LI");. Try it Yourself ». More "Try it Yourself" examples  All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code. Links. Bug tracker Roadmap (vote for features) About Docs Service status

Options for getting around this can be found in the tutorial. Any top-level statement (i.e. not inside a block or a function) can be made reactive by require that the variable be a writable store, and will result in a call to the store's .set method. All other attributes are included unless their value is nullish ( null or undefined ). Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Comments
  • I just tried with document.getElementsByTagName('svg')[0].innerHTML solely. Still same error of undefined.
  • On IE11, I was able to simple append the SVG element to an empty div and get its innterHTML which does return the correct stuff. Includes the <svg> tag itself but that isn't to hard to regex out.
  • outerHTML is also a problem for IE with SVG elements: stackoverflow.com/q/29888050/633107.
  • Yeah I saw the InnerSVG polyfill. But figured that had to be a simpler way, atleast for my tiny project. I just came up with my answer which fixes it for me.
  • The Polyfill is pretty simple; you just reference it and you're done. Internet Explorer, Chrome, and Firefox all proceed to use the same exact code.
  • We use an object tag and get our svg from a separate url. innerSVG doesn't seem to work for that for me. Does anyone have any ideas about that?
  • @Sampson, do you maybe have a link where we can follow the status of the issue to support innerHTML for svg elements?
  • Hi @Samspon :-)
  • To me, this is a suprisingly simple and correct solution. Works for me, thx.
  • perfect for IE 11. and jquery html() work fine, too
  • test on IE9 & IE11