Appended childs through appendChild() don't show up

问题

It gets all the data correctly, shown in a console.log(), but when it is appended it does show up in devTools, but not on screen.

I also tried putting the data on the page by pasting what I got from console in it to see if there where any differences, there weren't, but the pasted code was shown on screen.

Anybody got a clue on how I can fix it?

EDIT: added the HTML and put the x and y values to what im getting from the before code, so its more clarified.

var element;
var i = 1;
var x = 799.8;
var y = 620;
element = document.createElement("circle");
element.id = "circle" + (i + 1);
element.setAttribute("cx", x);
element.setAttribute("cy", y);
element.setAttribute("r", "500");
element.setAttribute("fill", "#42b6f4")
document.getElementById("svghead").appendChild(element);

And here is the HTML:

<svg id="svghead" style="flex: 1 1 0%; height: 90%; margin-left: 3%; 
    width: 86.8%; border: 1px solid black;"></svg>

回答1:

Remember you can't create svg elements by using simple createElement() you need to use createElementNS() which takes additional argument

let svgns = "http://www.w3.org/2000/svg";
var elm;
elm = document.createElementNS(svgns,"circle");

来源：https://stackoverflow.com/questions/54400888/appended-childs-through-appendchild-dont-show-up