title: Generating dynamic SVG with Internet Explorer
body: <p>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.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;svg id="planer-canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"&gt;
  
  &lt;/svg&gt;
  
  &lt;script&gt;
      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);
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>It works on Chrome and Firefox, thus IE throws error:</p>
  
  <pre><code>SCRIPT438: Object doesn't support property or method 'append'
  </code></pre>
  
  <p>Anybody had a similar problem? Can you enlighten me?</p>
  
  <p>here's codepen:
  <a href="https://codepen.io/anon/pen/ppWwBg#anon-login" rel="nofollow noreferrer">https://codepen.io/anon/pen/ppWwBg#anon-login</a></p>
  
  <p>What am I doing wrong?</p>