4 ms·
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). :
by wwweston 8y ago
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.
- paulgb 8y agoYou 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.
- wwweston 8y agoI 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!
- perilunar 8y agoThere'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