innerHTML, array, e qualche div dinamico.

[strae]

ciao ragazzi.. io ho scritto questo codice:

<script>
function changeId(){
    var i = document.getElementById('i').value;
    document.getElementById('prova').id = 'prova' + i;
    document.getElementById('prova' + i).innerHTML = 'vecchio dato</div><div id="prova">prova'+i;
    i++;
    document.getElementById('i').value = i;
}
</script>
[url="#"]click1[/url]
<div id="prova">div prova</div> 

ma non lavora come dovrebbe.
nel senso che, in quel modo, mi genera tutti gli altri div DENTRO al div prova (che poi gli cambia l'id, ma rimane sempre lui), invece avrei bisogno che i nuovi div me li mettesse dopo (per questo ho provato a fare una specie di injection miseramente fallita, mettendo il tag </div> e apredone uno subito dopo )

in poche parole, il codice che ho scritto genera questo output, dopo aver cliccato 3 volte sul link:

<div id="prova1">vecchio dato
    <div id="prova2">vecchio dato
        <div id="prova3">vecchio dato
            <div id="prova">prova3</div>
        </div>
    </div>
</div>

//ma io avrei bisogno che il codice fosse questo 

<div id="prova1">vecchio dato</div>
<div id="prova2">vecchio dato</div>
<div id="prova3">vecchio dato</div>
<div id="prova">prova3</div> 

howto? a me verrebbe in mente di fare innerHTML += [codice], usando un altro div a mò di container.. ma non mi piace come idea..mi sembra una 'pezza', non una soluzione


coi esperti che dite?