Me bateu uma dúvida recentemente, pelo qual devo manipular um certo número de elementos escondido através do display:none;
que esta definido sobre o span
que envolve todos eles.
Exemplo
<html>
<head>
<script>
var linhas = 25;
function mostrarGrupo() {
for( var i = linhas; i < linhas + 5; i++) {
document.getElementById('resultado').innerHTML += i + '<br>'
}
}
</script>
</head>
</body>
<input type="button" value="mais" onclick="mostrarGrupo()"/>
<br><br>
<div id="resultado"> </div>
<span id="dados" style="display:none">
// Primeiro Grupo
<hr id='linha1'>
<hr id='linha2'>
<hr id='linha3'>
<hr id='linha4'>
<hr id='linha5'>
// Segundo Grupo
<hr id='linha6'>
<hr id='linha7'>
<hr id='linha8'>
<hr id='linha9'>
<hr id='linha10'>
// Terceiro Grupo
<hr id='linha11'>
<hr id='linha12'>
<hr id='linha13'>
<hr id='linha14'>
<hr id='linha15'>
// Quarto Grupo
<hr id='linha16'>
<hr id='linha17'>
<hr id='linha18'>
<hr id='linha19'>
<hr id='linha20'>
// Quinto Grupo
<hr id='linha21'>
<hr id='linha22'>
<hr id='linha23'>
<hr id='linha24'>
<hr id='linha25'>
</span>
</body>
</html>
Para isso, será necessário apenas mostrar dentro do id resultado
cada 5 elemento escondido.
A cada clique mais 5 elementos ocultos no documento HTML, torna-se visível na id resultado
.
Veja como deve ficar:
Então com enfoque nisto de que jeito posso realizar isto?