Por que ações executadas dentro de loops são realizadas depois das dem

[cviniciussdias 2]

Por que, se eu adiciono um código dentro de um loop (for, por exemplo), as ações dentro dele são executadas após o que está fora?

Por exemplo, o seguinte script:

(function () {
    var i, teste = document.getElementById("teste");
    teste.innerHTML = "<ul>";
    for (i = 0; i < 5; i++) {
        teste.innerHTML += "<li>Teste " + i + "</li>";
    }
    teste.innerHTML += "</ul>";
})();

Esse bloco de código me gera essa saída:

<ul></ul><li>Teste 0</li><li>Teste 1</li><li>Teste 2</li><li>Teste 3</li><li>Teste 4</li>

O que está em volta do for, é executado primeiro. Só depois, o que está dentro do for é realizado.

Existe uma possibilidade de resolver isso?

Sei que nesse caso, eu poderia criar o elemento ul, e com appendChild inserir os elementos li, mas, esse foi só um exemplo do meu problema.

 

Desde já, grato!

[William Bruno 1501]

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que vc notou o erro ? no código acima, essa situação não acontece.

[Rafael R Silva 27]

Fala Vinicius o que acontece é o seguinte

 

 

Ao inserir o <ul> ( teste.innerHTML = "<ul>"; ) o dom automaticamente identifica como um elemento e o fecha.

E outro ponto é que você está adicionando o <li> ( teste.innerHTML += "<li>Teste " + i + "</li>"; ) na div pai do <ul> e não nele;

 

O certo seria algo assim:

var i, teste = document.getElementById("entry2172473");
    teste.innerHTML = "<ul id='ListTest'>";
    lista = document.getElementById('ListTest');
    for (i = 0; i < 5; i++) {
        lista.innerHTML += "<li>Teste " + i + "</li>";
    }

Se rodar esse código no console deste tópico verá o resultado;

[cviniciussdias 2]

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que você notou o erro ? no código acima, essa situação não acontece.

 

William, no exemplo, era exatamente o que acontecia. Você não deve nem ter testado...

Obrigado mesmo assim.

:-)

[cviniciussdias 2]

Muito obrigado Rafael. Clareou bastante a minha mente!

:-D