Unable to append svg element to svg root
<p>I would like to add a text element to my existing svg using a mouseover event. I think the code works fine in general but I'm unable to append my created text element to the existing svg file (root). I tried to do it in a way I could also find it right here on stackoverlow, but it doesn't work for me.
Neither <code>var root = doc.documentElement</code> nor <code>var root = doc.rootElement</code> works. Also it makes no difference using svgNS or null while creating the elements.</p>

<p>Here's my code:</p>

<pre><code>&lt;script type="text/ecmascript"&gt;
    &lt;![CDATA[function showText(evt) { 
    var doc = evt.target.ownerDocument; 
    var root = doc.documentElement; 
    var text = doc.createElementNS(null, "text"); 
    text.setAttributeNS(null, "x", "10"); 
    text.setAttributeNS(null, "y", "30"); 
    text.setAttributeNS(null, "font-size", "12"); 
    var textNode = doc.createTextNode("test"); 
    text.appendChild(textNode); 
    root.appendChild(text);  
    }]]&gt;
&lt;/script&gt;
</code></pre>

<p>Complete code of my svg:
<div class="snippet" data-lang="js" data-hide="true" data-console="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" style="stroke:black" height="600" width="800"&gt;
  &lt;rect width="800" x="0" y="0" height="600" style="fill:none" /&gt;
  &lt;rect width="800" x="0" id="textbox" y="540" height="60" style="fill:none" /&gt;
  &lt;rect width="720" x="40" y="30" height="480" style="fill:none" /&gt;
  &lt;line y2="510" x1="40" x2="760" y1="510" /&gt;
  &lt;line y2="510" x1="40" x2="40" y1="30" /&gt;
  &lt;text font-size="12" x="40" y="530"&gt;Time (X)&lt;/text&gt;
  &lt;text font-size="12" x="5" y="20"&gt;Data (Y)&lt;/text&gt;
  &lt;polyline style="stroke:black;fill:none;" points="91.84,217.19189757859385 143.68,323.2917668597486 195.52,235.86502103932202 247.36,43.359991864346625 299.2,202.8 351.04,315.903272925833 402.88,160.41241257803188 454.72,157.66691947582518 506.56,387.2047460928005 558.4,183.60000000000002 610.24,260.73963745895736 662.08,59.445816214522495 713.9200000000001,283.88097314947527 "
  stroke-width="2" /&gt;
  &lt;script type="text/ecmascript"&gt;
    &lt; ![CDATA[function showText(evt) {
      var doc = evt.target.ownerDocument;
      var root = doc.documentElement;
      var text = doc.createElementNS(null, "text");
      text.setAttributeNS(null, "x", "10");
      text.setAttributeNS(null, "y", "30");
      text.setAttributeNS(null, "font-size", "12");
      var textNode = doc.createTextNode("test");
      text.appendChild(textNode);
      root.appendChild(text);
    }]] &gt;
  &lt;/script&gt;
  &lt;circle id="circle" text="Dies ist ein Test" r="10" cx="400.0" onmouseover="showText(evt)" cy="510"&gt;Dies ist ein Test&lt;/circle&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>