Lo que te pasa es que cuando haces click, el elemento aparece y el evento (el click) sigue y se va a la página que tiene el enlace en el href (que suponiendo que esté vacío) te recarga la página.
Lo que tienes que hacer es detener el elemento "click" del href con "
event.preventDefault()", sería algo así:   
Código Javascript
:
Ver original- $(function(){ 
-     $("li>a").click(function(event) { 
-         event.preventDefault(); 
-         $(this).after("<div class='trian'></div>"); 
-     }); 
- }); 
P.D.: Yo pongo "$(function(){ ... });" pero es lo mismo que "$(document).ready(function() { ... });".