SVG.js - Element Referencing

SVG.js provides various methods of arranging previously created elements:
elem.add, elem.addTo, elem.after, elem.before, elem.back, elem.backward, elem.front, elem.forward, elem.put, elem.putIn, and elem.toParent
This example shows the difference in rendering placement between each method.
Mix & match the following: (Select Reset to start over)

Insert an element after another:
Insert an element before another:
Append an element to another:
Append another to an element:
Move element to the back of its container:
Move element one step backward:
Move element to the front of its container:
Move element one step forward:
Insert an element in a parent:
Element inserted in parent:
Move element to different parent:
Element Placement:

SVG Source:

OK in: IE11/Edge/CH55/FF52