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?

[artorius]

no, decisamente non hai ben chiaro il concetto di innerHTML...

In ogni caso, credo che ti troveresti meglio usando i metodi DOM:

function changeId(){ 
  var prova = document.getElementById('prova');
  var parent = prova.parentNode;
  
  var num = parent.getElementsByTagName('div').length;
  
  var newEl = createElement('div');
  newEl.innerHTML = prova.innerHTML;
  prova.innerHTML = "Vecchio Div";
  newEl.id = prova.id;
  
  prova.id = prova.id+(num);
  
  parent.appendChild(newEl);
}

function createElement(element) {
    if (typeof document.createElementNS != 'undefined') {
        return document.createElementNS('http://www.w3.org/1999/xhtml', element);
    }
    if (typeof document.createElement != 'undefined') {
        return document.createElement(element);
    }
    return false;
} 

La seconda funzione è utile per la compatibilità tra XHTML ed HTML4

[strae]

mmmh, è che avevo letto da qualche parte che il metodo DOM era parecchio più lento rispetto al metoto innerHTML.. così ho fatto 2 prove con innerHTML, ho visto un attimo come lavora, e non mi sono messo ad approfondire l'argomento (grande errore, lo sò, ma è questione di tempo..)

cmq per ora ho risolto, quando ho 5 minuti mi studio un pò il DOM e l'innerHMTL (visto che da quello che dici lo utilizzo nel modo sbagliato)