如何使用javascript将svg元素插入组

Question

我在HTML中嵌入了一些SVG代码，我需要使用JavaScript将多个多边形添加到现有的SVG中。 问题是存在的（我要添加到的）SVG在一个组（g标签）中，并且由于分层，我需要将新的多边形添加到该组中的特定位置。 我已经写了javascript几年了，但是我才刚刚开始学习SVG，而且我不知道如何使用javascript将元素添加到SVG DOM中的特定位置。 我在下面的评论解释了为什么这不同于先前提出的问题。

例如：

<g id="group1">
    <rect x="20" y="50" width="700" height="20" fill="url(#grad1)"/>
    I need to add polygons here.
    <rect x="20" y="140" width="700" height="20" fill="url(#grad1)"/>
</g>

Answer 1

使用Node.insertBefore ：

 var insertedNode = parentNode.insertBefore(newNode, referenceNode); 

如果referenceNode为null，则将newNode插入子节点列表的末尾。