如何在创建SVG后插入一些元素[[副本]

   $(document).ready(function() {
   // $(".sid").mouseenter(function() {
      //alert("I'm here");
      var a = document.createElementNS('http://www.w3.org/2000/svg','circle')
      console.log(a)
      a.setAttribute("class", 'sid')
      a.setAttribute("r", 20)
      a.setAttribute("cy", 50)
      a.setAttribute("cx", 250)
      a.setAttribute("fill", "blue")
      a.setAttribute("id", "circle3")
			$('#circle2').after(a); 
   //  });
    $(".sid").mouseleave(function() {
       // action
     });
});

$(document).ready(function() {
  $('svg').append(createSVG('circle', {
    id: "circle3",
    cx: 250,
    cy: 50,
    r: 20,
    fill: "blue",
    class: "sid"
  }));
});

function createSVG(tag, attrs) {
  var svg = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var attr in attrs)
    svg.setAttribute(attr, attrs[attr]);
  return svg;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

$(document).ready(function() {
  $("svg").append(
    $.parseXML(`<circle xmlns="http://www.w3.org/2000/svg" 
    id="circle3" cx="250" class="sid" 
    cy="50" r="20" fill="blue"/>`).documentElement);
});

<脚本src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></脚本>
<circle id=“circle1”class=“sid”cx=“50”cy=“50”r=“20”fill=“red”/>
<circle id=“circle2”class=“sid”cx=“150”cy=“50”r=“20”fill=“绿色”/>
</svg>