Hinzufügen eines SVG-Elements zu einem vorhandenen SVG mithilfe von DOM

Ich habe eine HTML-Konstruktion, die dem folgenden Code ähnelt:

<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

Ich möchte in der Lage sein, der oben definierten SVG einige Elemente mit Javascript und DOM hinzuzufügen. Wie würde ich das erreichen? Ich dachte an

var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

Ich bin nicht sehr vertraut mit der Verwendung von DOM oder dem Erstellen des Elements, das an appendChild übergeben werden soll. Bitte helfen Sie mir dabei oder zeigen Sie mir möglicherweise, welche anderen Alternativen ich zur Lösung dieses Problems habe. Danke vielmals.

Wenn Sie ein HTML-Element erstellen möchten, verwenden Sie die document.createElementFunktion. SVG verwendet den Namespace, deshalb müssen Sie die document.createElementNSFunktion verwenden.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

Dieser Code erzeugt ungefähr Folgendes:

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Wenn Sie mit JS viel mit SVGs zu tun haben, empfehle ich die Verwendung von d3.js. Fügen Sie es in Ihre Seite ein und gehen Sie wie folgt vor:

d3.select("#svg1").append("circle");