Snap - Element Placement Techniques

Snap provides various methods of arranging previously created elements:, elem.after, elem.append, elem.appendTo, elem.before, elem.insertAfter, elem.insertBefore, elem.prepend, and elem.prependTo. This example shows the difference in rendering placement between each method.
Mix & match the following:

.after() (elem below el)

.before() (elem above el)




el becomes child of elem:  <elem ... ><el ... ></el></elem>

elem becomes child of el:  <el ... ><elem ... ></elem></el>

SVG Source:

OK in: IE11/Edge/CH55/FF52