Javascript 如何在创建SVG后插入一些元素？

我已经创建了一个SVG，现在的问题是在两个元素之间动态添加一些代码

我怎样才能做到呢？即使是JS或jquery也没问题

$（文档）.ready（函数（）{
$（“.sid”）.mouseenter（函数（）{
警惕（“我在这里”）；
$（'圆圈2'）。附加（''）；
});
$（“.sid”）.mouseleave（函数（）{
//行动
});
});

是否可以不创建SVG，而是在元素之间添加一些代码

期望像这样的输出

<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="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

---

试试这个密码，我已经检查过你的小提琴了

$（文档）.ready（函数（）{
//$（“.sid”）.mouseenter（函数（）{
//警惕（“我在这里”）；
var a=document.createElements（'http://www.w3.org/2000/svg“，”圆圈“）
控制台日志（a）
a、 setAttribute（“类”，“sid”）
a、 setAttribute（“r”，20）
a、 setAttribute（“cy”，50）
a、 setAttribute（“cx”，250）
a、 setAttribute（“填充”、“蓝色”）
a、 setAttribute（“id”、“圆圈3”）
$（#圆圈2'）。在（a）之后；
//  });
$（“.sid”）.mouseleave（函数（）{
//行动
});
});试试这个代码，我已经检查过你的小提琴了


$（文档）.ready（函数（）{
//$（“.sid”）.mouseenter（函数（）{
//警惕（“我在这里”）；
var a=document.createElements（'http://www.w3.org/2000/svg“，”圆圈“）
控制台日志（a）
a、 setAttribute（“类”，“sid”）
a、 setAttribute（“r”，20）
a、 setAttribute（“cy”，50）
a、 setAttribute（“cx”，250）
a、 setAttribute（“填充”、“蓝色”）
a、 setAttribute（“id”、“圆圈3”）
$（#圆圈2'）。在（a）之后；
//  });
$（“.sid”）.mouseleave（函数（）{
//行动
});
});要创建SVG元素，必须声明名称空间
http://www.w3.org/2000/svg

下面是一个演示：


$（文档）.ready（函数（）{
$（'svg'）.append（createSVG（'circle'）{
id:“圆圈3”，
cx:250，
塞：50，
r:20，
填充：“蓝色”，
类别：“sid”
}));
});
函数createSVG（标记、属性）{
var svg=document.createElements（'http://www.w3.org/2000/svg",标签),；
for（属性中的var attr）
setAttribute（attr，attrs[attr]）；
返回svg；
}
要创建SVG元素，必须声明名称空间
http://www.w3.org/2000/svg

下面是一个演示：


$（文档）.ready（函数（）{
$（'svg'）.append（createSVG（'circle'）{
id:“圆圈3”，
cx:250，
塞：50，
r:20，
填充：“蓝色”，
类别：“sid”
}));
});
函数createSVG（标记、属性）{
var svg=document.createElements（'http://www.w3.org/2000/svg",标签),；
for（属性中的var attr）
setAttribute（attr，attrs[attr]）；
返回svg；
}

这里的querySelector是什么？你能简单解释一下或者给我看一些例子@arif Rathodread这篇文章吗？你可以使用自己的方法来查找元素。这只是为了在DOM中查找元素。您可以使用我的Jsfiddle@arif Rathodcheck我已经更新了正在工作的代码；）这里的querySelector是什么？你能简单解释一下或者给我看一些例子@arif Rathodread这篇文章吗？你可以使用自己的方法来查找元素。这只是为了在DOM中查找元素。您可以使用我的Jsfiddle@arif Rathodcheck我已经更新了正在工作的代码；）
<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="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>