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

score 11 · Accepted Answer · answered Jul 16 '14 at 13:42

11

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

answered Jul 16 '14 at 13:42

Aaron Digulla

321,842
108
597
820

score 1 · Answer 2 · edited Jun 21 '21 at 22:33

1

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

edited Jun 21 '21 at 22:33

Community

1
1

answered Feb 13 '17 at 07:41

IvaMuxa

136
5

3

Welcome to Stack Overflow! Stack Overflow [requires that all posts be in English](https://stackoverflow.blog/2009/07/non-english-question-policy/). 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](http://es.stackoverflow.com), [Japanese](http://ja.stackoverflow.com), [Russian](http://ru.stackoverflow.com), [Portuguese](http://pt.stackoverflow.com). – FelixSFD Feb 13 '17 at 07:42

score 0 · Answer 3 · answered Aug 12 '18 at 19:19

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.

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

3 Answers3