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

Waterrepellent

Answer 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);

Fairminded

Answer 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

Supramolecular

Welcome to Stack Overflow! Stack Overflow requires that all posts be in English. Please edit your post or comment to comply with this rule or remove it. You may repost it in one of these language specific Stack Overflow communities which allow non-English: Spanish, Japanese, Russian, Portuguese. – Celebrity

Answer 3

I ran into this same error, except I'm not using JQuery. The problem I found, was that the element i was trying to move from one Div to another, was invisible (that is, its style display = 'none').

First by removing this style and then appending it, solved the problem for me.

Hateful