title: How to add a circle to svg element
body: <p>I'm trying to put circles in svg dynamically. In <code>index.html</code> file I created this <code>svg</code> section.</p>
  
  <pre><code>&lt;svg id="svgArea" width="500" height="500"&gt;&lt;/svg&gt; 
  </code></pre>
  
  <p>In <strong>js</strong> file i tried this</p>
  
  <pre><code>$('#svgArea').append('&lt;circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /&gt;');
  </code></pre>
  
  <p>This seems not working. </p>
  
  <p>Tried the below code, but couldn't find how to apply cx, cy, r ...</p>
  
  <pre><code>var crcl= document.createElement("CIRCLE");
  $('#svgArea').append(crcl);
  </code></pre>
  
  <p>What I am trying to achieve is dynamically create n circles on a button click. And on another button click delete buttons one by one.</p>