2

Eu preciso exibir o resultado do laço FOR em uma DIV, pulando linha, como eu posso fazer?

Exemplo

1
2
3
4
5

Meu Código:

for(i = 0; i <= keyCliente; i++){
    document.getElementById("divExibir").innerHTML = i;
}

3 Respostas 3

1

Tens duas opões, ou usas um <br> que faz exatamente "quebra de linha" ou colocas esse conteúdo dentro de um elemento bloco, como o p. Ou outro elemento qualquer não "bloco" mas com display: block no css.

Nota:

  • tens de usar += para evitar estar sempre a apagar e escrever por cima dentro do loop. Com o += ele vai acrescentando.
  • muda o document.getElementById('divExibir'); para fora do loop. Essa linha atrasa o código.

Usando <br>:

var keyCliente = 5;
var divExibir = document.getElementById("divExibir")
for (var i = 1; i <= keyCliente; i++) {
    divExibir.innerHTML += i + '<br>';
}

jsFiddle: https://jsfiddle.net/euerct5u/3/

Usando <p>:

var keyCliente = 5;
var divExibir = document.getElementById("divExibir")
for (var i = 1; i <= keyCliente; i++) {
    var p = document.createElement('p');
    p.innerHTML = i;
    divExibir.appendChild(p);
}

jsFiddle: https://jsfiddle.net/euerct5u/4/

ou, alternativa:

var keyCliente = 5;
var divExibir = document.getElementById("divExibir")
for (var i = 1; i <= keyCliente; i++) {
    divExibir.innerHTML += '<p>' + i + '</p>';
}

jsFiddle: https://jsfiddle.net/euerct5u/5/

1

Você pode resolver isso da seguinte maneira:

document.getElementById("divExibir").innerHTML = document.getElementById("divExibir").innerHTML + i + '<br>';
1

Quando você usa innerHTML você substitui a cada loop tudo que está dentro da div e coloca o novo conteúdo. Ou seja quando passa pelo primeiro loop ele adicionava o número 1, quando passava pelo segundo loop, ele zera a div e adicionava o 2 e assim por diante, abaixo segue exemplo de como conservar o conteúdo original e adicionar um novo em seguida. Somei com um <br /> para quebrar a linha.

<script>
  for (i = 0; i < 10; i++) {
    var div = document.getElementById('divExibir');

    div.innerHTML = div.innerHTML + i + '<br />';
  }
</script>

Fonte

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .