Hazlo mejor con innerHTML

 
for (i=1; i<=4; i++){
  for (j=0; j<i; j++){
    document.innerHTML +=  "*";
  }
    document.innerHTML += "<br>";
}
 

Yo te digo lo que haría: Primero dibujar el rombo en papel con una cuadrícula, usando colores para ver las diferentes variables.


De lo que yo veo, tienes varios espacios en color amarillo, seguido por el cuerpo del rombo que son uno o dos asteriscos rodeando una secuencia de espacios. Por tanto yo comenzaría creando un método llamado espacios(fila) que te devolviera el número de espacios según la fila. En la fila 1, imprimes tres espacios (los cuadros amarillos). En la fila 2, imprimes dos espacios, en la 3 imprimes 1, en la cuatro imprimes ninguno, y luego al revés.

Después haría un método llamado lineaDeRombo(fila) que según la fila, te imprima el rombo. Por ejemplo, en la fila 1 tienes que imprimir "*", o sea un asterisco seguido de 0 espacios, y 0 asteriscos. Trata de entender el patrón para cada una de las filas y así podrás escribir el código:
fila 1: imprimes 1 asterisco, seguido de 0 espacios, seguido de 0 rombos: 1,0,0
fila 2: imprimes 1 asterisco, seguido de 1 espacio, seguido de 1 rombo: 1,1,1
fila 3: imprimes 1 asterisco, seguido de 3 espacios, seguido de 1 rombo: 1,3,1
fila 4: imprimes 1 asterisco, seguido de 5 espacios, seguido de 1 rombo: 1,5,1

A lo mejor es un poco difícil hacer la parte inferior, igual te la dejo que la hagas tú  

Luego lo que yo haría sería algo como
Espero que te ayude...