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;
}
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:
+=
para evitar estar sempre a apagar e escrever por cima dentro do loop. Com o +=
ele vai acrescentando.document.getElementById('divExibir');
para fora do loop. Essa linha atrasa o código.<br>
:var keyCliente = 5;
var divExibir = document.getElementById("divExibir")
for (var i = 1; i <= keyCliente; i++) {
divExibir.innerHTML += i + '<br>';
}
<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);
}
ou, alternativa:
var keyCliente = 5;
var divExibir = document.getElementById("divExibir")
for (var i = 1; i <= keyCliente; i++) {
divExibir.innerHTML += '<p>' + i + '</p>';
}
Você pode resolver isso da seguinte maneira:
document.getElementById("divExibir").innerHTML = document.getElementById("divExibir").innerHTML + i + '<br>';
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>