<!DOCTYPE html>
<html>
<head>
<style>
pre {display:inline-block;} </style>
</head>
<body>
<pre id="arbol1"></pre> <pre id="arbol2"></pre>
</body>
<script>
function arbolA(id) { // definimos la anchura máxima
var max=20;
// determina el numero de lineas mostradas
var j=1;
// contiene el resultado a mostrar
var result="";
for(i=1;i<=max;i+=2)
{ result+="<br>"+(Array((1+(Math.ceil(max/2))-j)).join(" ")+Array(i+1).join("*")); j=j+1;
}
//tronco
if(max>=7)
{ result+="<br>"+(Array((1+(Math.ceil(max/2))-2)).join(" ")+Array(4).join("*")); result+="<br>"+(Array((1+(Math.ceil(max/2))-2)).join(" ")+Array(4).join("*")); }
document.getElementById(id).innerHTML=result;
}
function arbolB(id) { // definimos la anchura máxima
var max=20;
// variables de interación
var j=1,k=1;
// contiene el resultado a mostrar
var result="";
for(var h=1;h<3;h++)
{ for(var i=k;i<=max;i+=2)
{ result+="<br>"+(Array((1+(Math.ceil(max/2))-j)).join(" ")+Array(i+1).join("*")); j=j+1;
}
k=5;
j=3;
}
//tronco
if(max>=7)
{ result+="<br>"+(Array((1+(Math.ceil(max/2))-2)).join(" ")+Array(4).join("*")); result+="<br>"+(Array((1+(Math.ceil(max/2))-2)).join(" ")+Array(4).join("*")); }
document.getElementById(id).innerHTML=result;
}
arbolA("arbol1");arbolB("arbol2");</script>
</html>