title: Add SVG element to existing SVG using DOM
body: <p>I have a HTML construction that resembles the following code:</p>
  
  <pre><code>&lt;div id='intro'&gt;
  &lt;svg&gt;
  //draw some svg elements
  &lt;svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to add some elements to the SVG defined above using javascript and DOM. How would I accomplish that? I was thinking of</p>
  
  <pre><code>var svg1=document.getElementById('intro').getElementsByTagName('svg');
  svg1[0].appendChild(element);//element like &lt;line&gt;, &lt;circle&gt;
  </code></pre>
  
  <p>I am not very familiar with using DOM, or how to create the element to be passed to appendChild so please help me out with this or perhaps show me  what other alternatives I have to solve this issue. Thanks a lot.</p>