What causes an hierarchy request error when trying to move an svg from one div to another?

Question

I am trying to move an svg from one div to another. This stack question offered this solution which I tried.

document.getElementById("LightBoxDiv").appendChild(svgId+"V");

When I tried this, I received an hierarchy request error. This stack question suggested several things which might be the cause. I cannot tell that I have any of those things, but am not sure. Bot my div's are in the body element and are not nested within one another, however, one of the div's was only a few lines before created dynamically with javascript. Here's the script I am using to create that div.

var lightboxdiv = document.createElement('div');
lightboxdiv.id = "LightBoxDiv";
document.body.appendChild(lightboxdiv);
document.getElementById("LightBoxDiv").style.display="block";
document.getElementById("LightBoxDiv").style.position="fixed";
document.getElementById("LightBoxDiv").style.overflow="hidden";
document.getElementById("LightBoxDiv").style.padding="5%";
document.getElementById("LightBoxDiv").style.top=0;
document.getElementById("LightBoxDiv").style.left=0;
document.getElementById("LightBoxDiv").style.width="100%";
document.getElementById("LightBoxDiv").style.height="100%";
document.getElementById("LightBoxDiv").style.background="white";
document.getElementById("LightBoxDiv").style.zIndex="1001";
document.getElementById("LightBoxDiv").setAttribute("class","dotouch");

document.getElementById("LightBoxDiv").appendChild(svgId+"V");

The last line is the one that throws the error. Any idea what I've done to cause the error? How might I go about fixing it.

Thanks, --christopher

Solution 1

You're mixing jQuery code with standard DOM API.

The function appendChild() expects a DOM node, not an Element ID. Try

var svg = document.getElementById(svgId+"V");
document.getElementById("LightBoxDiv").appendChild(svg);

Solution 2

const lightboxdiv = document.getElementById("LightBoxDiv"); 

Why strain the user's browser 12 times to search for an element in a document id that is already stored in a variable?

lightboxdiv.style.display = ...; 
lightboxdiv.style.position = ...; 

I think it would work much