title: How can I add a SVG graphic dynamically using javascript or jquery?
body: <p>I am trying to create a SVG tag structure only when or after page loads. </p>
  
  <p>This request may seem strange but this is needed since most of the html markup is generated by a compiled authoring software application so I can't tamper with it. I can only "inject" javascript to create additional assets (ex: Divs) as needed.</p>
  
  <p>See below for markup. [Portions of html markup have been omitted for clarity.]</p>
  
  <pre><code>&lt;html&gt;
  ....
  &lt;script&gt;
  function run()  {
  var newSvg = document.getElementById('myDiv'); 
  newSvg.outerHTML+='&lt;svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100&gt;&lt;circle cx="400" cy="400" r="40" stroke="red" stroke-width="4" fill="blue" /&gt;';
  }
  &lt;/script&gt;
  &lt;body&gt;
  ....
  &lt;div id="myDiv"&gt;&lt;/div&gt;
  ....
  &lt;script&gt;
  run();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I place the SVG markup in the destination location manually, page and SVG renders properly. If I try to create markup dynamically, I get nothing.</p>
  
  <p>When I view html source after page loads there is no markup for the SVG which should have been created by the function. </p>
  
  <p>I have tried doing via a <code>&lt;body onLoad="run()"&gt;</code> event but it also does not work.</p>
  
  <p>Note: This function has worked fine when I need to create a new DIV dynamically. </p>
  
  <p>What am I doing wrong? Thanks in advance to all. </p>