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.
Scenerio:
Mix & match the following: (Select Reset to start over)

Insert an element after another:
.after()
Insert an element before another:
.before()
Append an element to another:
.add()
Append another to an element:
.addTo()
Move element to the back of its container:
.back()
Move element one step backward:
.backward()
Move element to the front of its container:
.front()
Move element one step forward:
.forward()
Insert an element in a parent:
.put()
Element inserted in parent:
.putIn()
Move element to different parent:
.toParent()
Element Placement:

SVG Source:
Javascript:

OK in: IE11/Edge/CH55/FF52