[Auriana]

I have an svg container as such

Code

<svg viewBox="0 0 100 100" id="svgview">

Inside I have a tag to separate the elements by css.

PHP Code


<?php 
<g class="first"> 


PHP Code


<?php 
<svg viewBox="0 0 100 100" id="svgview">
 <g class="first"></g>
</svg> 


I'd like to create an element dynamically and insert it into the g class tag.

I can use getElementById to get the svg and getElementByClassNAme to get the class "first" but if I try doing getElementByClassName("first").appendChild(element);
I receive this error.
Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

How can I insert an element inside the g tag?

[Abruptum]

I have an svg container as such

Code

<svg viewBox="0 0 100 100" id="svgview">

Inside I have a tag to separate the elements by css.

PHP Code


<?php 
<g class="first"> 


PHP Code


<?php 
<svg viewBox="0 0 100 100" id="svgview">
 <g class="first"></g>
</svg> 


I'd like to create an element dynamically and insert it into the g class tag.

I can use getElementById to get the svg and getElementByClassNAme to get the class "first" but if I try doing getElementByClassName("first").appendChild(element);
I receive this error.
Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

How can I insert an element inside the g tag?

The problem is in the name, the function do not exist ...
document.getElementsByClassName will return an array ("ElementS")

so you need to do it like this document.getElementsByClassName(...)[0].appendChild()

[Auriana]

The problem is in the name, the function do not exist ...
document.getElementsByClassName will return an array ("ElementS")

so you need to do it like this document.getElementsByClassName(...)[0].appendChild()

Ah! I never considered that, interesting. Thank you for the solution; however I did try that and it doesn't seem to appear on the page. The code does work though, there's no errors and the elements are in fact being created. But it's not appearing. Do I have to do something extra because it's an SVG?

[Abruptum]

Ah! I never considered that, interesting. Thank you for the solution; however I did try that and it doesn't seem to appear on the page. The code does work though, there's no errors and the elements are in fact being created. But it's not appearing. Do I have to do something extra because it's an SVG?

You need to create the new Element this way : https://stackoverflow.com/questions/1648...-using-dom

[Auriana]

You need to create the new Element this way : https://stackoverflow.com/questions/1648...-using-dom

Okay so I have to create the SVG dynamically as well? I can't already have an existing SVG and insert into tags?

[Disease]

Okay so I have to create the SVG dynamically as well? I can't already have an existing SVG and insert into tags?

You could define the SVG and just clone it in, sure.

[Abruptum]

Okay so I have to create the SVG dynamically as well? I can't already have an existing SVG and insert into tags?

You can but the elements inside the svg needs to be crafted as "http://www.w3.org/2000/svg" type :)
so you could create a element in your g class like this :

Code

var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path');
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
document.querySelector('#svgview .first').appendChild(newElement);

this would create a new element path with some settings and then it will be added to the svg.

[Auriana]

You can but the elements inside the svg needs to be crafted as "http://www.w3.org/2000/svg" type :)
so you could create a element in your g class like this :

Code

var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path');
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
document.querySelector('#svgview .first').appendChild(newElement);

this would create a new element path with some settings and then it will be added to the svg.

Ah okay! I got it working thank you so much!