[FIXED] how to update a SVG when adding a group dynamically using javascript

Issue

I am making a circuit builder, I am going to use SVG for the components. The structure of my html has a empty svg tag scaled to full width and height. My java script does the job of adding the components (svg groups) when dragged from the toolbar into the canvas (screen). But for some reason it is not displaying on the screen. Should i update my svg or something similar to show the added elements?

function drop (e){
e.preventDefault();
const id = e.dataTransfer.getData("text");
const el = document.getElementById(id);
const dupEl = el.cloneNode(true);
dupEl.id = id+String(idCount);
idCount+=1;
document.getElementById("canvas").appendChild(dupEl);}

el is the svg group element it looks like

<g id ="gen">
            <circle cx="90.327" cy="30.277" r="30" style="fill:none;stroke-width:2;stroke:#000"/>
            <path d="m120.33 30.277h59.95" style="fill:none;stroke-width:2;stroke:#000"/>
            <path d="m60.327 30.277h-60.05" style="fill:none;stroke-width:2;stroke:#000"/>
            <text transform="matrix(1.7791 0 0 1.7791 -68.406 -26.148)" style="fill:#000000;font-family:sans-serif;font-size:10.583px;line-height:1.25;shape-inside:url(#rect1053);white-space:pre" xml:space="preserve"><tspan x="80.222656" y="39.933093"><tspan style="font-family:sans-serif;font-size:22.578px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold">G</tspan></tspan></text>
</g>

The element with the id canvas is

<svg class="canvasSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="canvas">   
            </g>    
</svg>

Thanks in advance.

Solution

As @Robert Longson mentioned in the comments, a div cannot display svg groups, a parent svg tag is necessary.

Answered By - Rahul Raman

Answer Checked By - Terry (PHPFixing Volunteer)