Buona giornata a tutti...

smanettando ho imparato ad usare (poco) document.createElement

con queste istruzioni (naturalmente ne manca) faccio generare una serire di box:

codice:
var newBoxDiv = document.createElement('div');
newBoxDiv.setAttribute('id','principale_'+progressivo_dei_principali);
newBoxDiv.setAttribute("class","box_piccolo colorato");
...esattamente viene fuori:
<div ID="principale_1" class="box_piccolo colorato">contenuto che gli passo</div>
<div ID="principale_2" class="box_piccolo colorato">contenuto che gli passo</div>

Tutto funziona perfettamente (e via css me lo faccio visualizzare a dovere)...

...il problema è che il markup risulta poco leggibile perché ottengo questo:

codice:
<div ID="principale_1" class="box_piccolo colorato">contenuto che gli passo</div><div ID="principale_1" class="box_piccolo colorato">contenuto che gli passo</div>
come vedete stanno su una linea e se ho tanto codice diventa un casino reintervenire per eventuali modifiche...

Come posso fare in modo che creando elementi con document.createElement, il markup generato si presenti cosi?
codice:
<div ID="principale_1" class="box_piccolo colorato">contenuto che gli passo</div>

<div ID="principale_1" class="box_piccolo colorato">contenuto che gli passo</div>

ho provato a inserire gli +"\n\n\n" prima della creazione dell'elemento DIV, ma non ci riesco...

in realtà se sapessi dove andare a mettere questi a capo prima o dopo del DIV che creo avrei risolto...

sono sicuro che è una stupidaggine, ma giuro le ho provate tutte (quelle che conosco)... NON CI RIESCO...

Che me la date una dritta?!

GRAZIE