TIL, thank you. Just so I understand, you're looking for workarounds like [1]?

[1] https://codepen.io/osublake/pen/YXoEQe

TIL that appendChild will take existing nodes out of their existing spot in a document (as well as the more obvious action of appending them to another node). :)

This is a good start, but it's limited to "move to front." If you wanted to move something between two intermediate planes, you'd have to reshuffle the whole stack.

You could use <g> tags for this, e.g.

<svg> <g id="z-order-0"></g> <g id="z-order-1"></g> <g id="z-order-2"></g> </g>

Then you can change the z-order by moving the element to the appropriate group. Elements are rendered in the order of an inorder traversal which is why this works.

I like this -- I'm sure there's some annoying corner cases, but at first glance I think it covers most of the use cases I've worried about. Thanks!

There's also insertBefore, which you can use to move a node anywhere:

  parentNode.appendChild(node);                         // move to top
  parentNode.insertBefore(node, parentNode.firstChild); // move to the bottom
  parentNode.insertBefore(node, someNode);              // move just below someNode
  parentNode.insertBefore(node, someNode.nextSibling);  // move just above someNode