Setting text SVG element dynamically via javascript

    function createText() {

  var newText = document.createElementNS(svgNS,"text");
  newText.setAttributeNS(null,"x",20);      
  newText.setAttributeNS(null,"y",100);   
  var textNode = document.createTextNode("milind morey");
  newText.appendChild(textNode);
  document.getElementById("firstGroup").appendChild(newText);
}

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">    
       <g id="firstGroup">

    <text x="20" y="45" onclick="createText();" font-size=+13px">Click on this text to create a new text.</text>

  </g>
       </svg>

You're short an "h" in your namespace

Was

var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');

should be

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

Tags:

Javascript

Svg