SVG appendChild at specific childNode

[SJH 9 Likes (Newbie)]

I am able to move a grouped element within my SVG to the front of all other elements using appendChild, but how do I put it back into the same Z level that I took it from?

 

Before the appendChild code runs the Firebase group is on the bottom of the SVG stack; after the code runs it is on the top. How do I put it back to its original bottom position.

 

See the Pen KKxQLOE by sandalwoodsh (@sandalwoodsh) on CodePen

[SJH 9 Likes (Newbie)]

See the Pen eYLMYLd by sandalwoodsh (@sandalwoodsh) on CodePen

 

The solution I opted for was to clone the object and append the clone to the SVG; that way the original remains intact. Since I only want to bring the group <g> to the front, it works for my purposes. Once I'm done with the clone, I can remove it and the original element still exists in its proper layer within the SVG stack.

[PointC 14,429 Likes (Superhero)]

Clone and append certainly works. Depending on your needs, insertAdjacentElement() could also work. 

 

theSVG.insertAdjacentElement("afterbegin", theAppendedItem);

More info:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

 

Happy tweening.

 

 

[SJH 9 Likes (Newbie)]

I think both answers provide a solution depending on one's needs.

I definitely realize that PointC has a much broader and deeper depth of knowledge; so I bow to his expertise.