title: How to dynamically change the text content of svg in html with javascript
body: <p>My requirement is to remove the text element from <code>g</code> and another text element.
  But when I run this code, text which written is removed perfectly but adding new text tag is not showing. When I open the developer section of Chrome, it shows my added <code>text</code> tag but it is not showing in view. And when I update any thing from developer section of chrome then DOM again reload and my new text would be shown in view.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;  
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;svg id="t"&gt;
      &lt;g&gt;
          &lt;text x="10" y="10"&gt;hello&lt;/text&gt;
      &lt;/g&gt;
      &lt;/svg&gt;
      &lt;script&gt;
              var s = document.getElementById('t');
              var g = s.childNodes[1];
              console.log(g.childNodes[1].remove());//remove text must in my case
              var txt = document.createElement('text');
              txt.setAttribute('x', '10');
              txt.setAttribute('y', '10');
              var t = document.createTextNode("This is a paragraph.");
              txt.appendChild(t);
              g.appendChild(txt);
  
      &lt;/script&gt;        
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>