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

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!