CODEWITHSUNDEEP
javascriptinternet-explorersvg
Jan Pi
Jan Pi

Reputation: 167

Generating dynamic SVG with Internet Explorer

Can you tell me why my code doesn't work in Internet Explorer (Edge and 11)? I want to add to svg element subelement with javascript.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>

<svg id="planer-canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">

</svg>

<script>
    const NS = 'http://www.w3.org/2000/svg';
    var planer = document.getElementById('planer-canvas');

    var elem = document.createElementNS(NS, "circle");
    elem.setAttributeNS(null, "cx", 10);
    elem.setAttributeNS(null, "cy", 10);
    elem.setAttributeNS(null, "r", 10);
    elem.setAttributeNS(null, "stroke", "black");
    elem.setAttributeNS(null, "stroke-width", 2);
    elem.setAttributeNS(null, "fill", "yellow");
    elem.setAttributeNS(null, "id", "close-circle");

    planer.append(elem);
</script>
</body>

</html>

It works on Chrome and Firefox, thus IE throws error:

SCRIPT438: Object doesn't support property or method 'append'

Anybody had a similar problem? Can you enlighten me?

here's codepen: https://codepen.io/anon/pen/ppWwBg#anon-login

What am I doing wrong?

Upvotes: 0

Views: 558

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

append is not supported by Internet Explorer or Edge: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

Change to:

planer.appendChild(elem);

…, which is supported by all browsers.

Upvotes: 4

Related Questions