Javascript: Construindo listas dinamicamente

Palavras-chave: DOM, childnode, removechild, excluir itens

Quando começamos a trabalhar com telas javascript, especialmente quando o assunto tem a ver com Ajax e coisas parecidas, é praticamente inevitável o desejo de tornar aquelas páginas HTML estáticas em algo mais interativo, tal como uma aplicação Desktop, sem aquele eventual “reload”. Nesses casos nada melhor que a combinação DOM + Javascript.

Uma caso bem típico de páginas dinâmicas é atualizar uma coleção qualquer, removendo os itens existentes e incluindo novos.

...

<ul id="Foo">
  <li>um</li>
  <li>dois</li>
  <li>tres</li>
  <li>quatro</li>
  <li>cinco</li>
</ul>

<button onclick="recarrega()">recarrega</button>

...

O trecho acima é uma lista de itens de variando de “um” até “cinco”. Neste exemplo fazemos uso de uma lista comum (tag UL), mas poderíamos fazer o mesmo com qualquer outro tipo de elemento DOM.

Ao final existe um botão que chama uma função javascript chamada recarrega(). Vamos dar uma olhada nela:

function recarrega() {
  var p = document.getElementById('Foo');
  var filhos = p.childNodes;
  for( i = filhos.length - 1; i >= 0; i-- ) {
    if( filhos[i].tagName == 'LI' ) {
      p.removeChild( filhos[i] );
    }
  }

  var li = document.createElement('li');
  li.innerHTML = 'seis';
  p.appendChild(li);

  var li = document.createElement('li');
  li.innerHTML = 'sete';
  p.appendChild(li);
}

A função não tem segredo algum. Após recuperar o elemento “pai” da lista (identificado como Foo), buscamos todos os nós abaixo dele, que no nosso caso são os itens da lista (LI), através do atributo childNodes. Esse atributo é uma lista comum e pode ser acessada como se fosse um array.

Dentro do for tomamos cuidado de excluir apenas os elementos de tagName LI. Observe que os itens são recuperados do último para o primeiro. Naturalmente é neste ponto que geralmente as pessoas se perdem.

Se ao invés de iterar sobre a lista na ordem inversa tivéssemos ido em ordem crescente, ao excluir um elemento em uma dada posição, o elemento seguinte assumiria essa posição. No loop seguinte o contador i teria sido incrementado e buscaria o elemento nessa posição, que agora ocupa a posição do item excluído anteriormente.

Quando isso ocorre ou o script pula um elemento a ser excluído ou tenta excluir um item que não existe na lista gerando uma exceção.

This entry was posted in JavaScript. Bookmark the permalink.

8 Responses to Javascript: Construindo listas dinamicamente

  1. Bom dia, li o artigo “Construindo listas dinamicamente” achei interessante, me ajudou muito, mas estou com um problema.
    Estou construindo uma caixa de texto que quando eu digito ele faz uma busca e mostra uma lista, ja fiz a lista utilizando um “select” mas o IE naum me deixa mudar as bordas dele e fica feio, então fiz uma lista utilizando um “div” com um “UL..li”(lista), mas não consigo recuperar o valor digitado em um click sem colocar uma tag , pos acaso vcs sabem como eu recupero im item de uma lista(ul) com javascript?

  2. Uma maneira é colocar um id em todo o elemento que você adicionar. Assim, você pode removê-lo facilmente.

    um
    dois

    var botado = false;
    function botar() {
    p = document.getElementById(‘lista’);
    var li = document.createElement(‘li’);
    li.innerHTML = ‘tres’;
    li.setAttribute(‘id’, ‘meuId’);
    p.appendChild(li);
    }
    function tirar() {
    i = document.getElementById(‘meuId’);
    alert(‘Conteudo: ‘+i.innerHTML);
    document.getElementById(‘lista’).removeChild(i);
    }

  3. Grrr. Não posso editar o comentário acima, mas aqui vai o código escapado agora. :)

    <ul id=”lista”>
    <li>um</li>
    <li>dois</li>
    </ul>

    <input type=”button” value=”botar” onclick=”botar()”/>
    <input type=”button” value=”tirar” onclick=”tirar()”/>

    <script>
    var botado = false;
    function botar() {
    p = document.getElementById(‘lista’);
    var li = document.createElement(‘li’);
    li.innerHTML = ‘tres’;
    li.setAttribute(‘id’, ‘meuId’);
    p.appendChild(li);
    }
    function tirar() {
    i = document.getElementById(‘meuId’);
    alert(‘Conteudo: ‘+i.innerHTML);
    document.getElementById(‘lista’).removeChild(i);
    }
    </script>

  4. Alex says:

    Olá, ao testar o script, ele carregou “seis” “sete”, acabei não entendendo nada ?
    Pode ser mais claro ?
    obrigado

  5. daniela says:

    Entao, to com uma questãoa ser resolvida, e gostaria de saber se pode me ajudar, imaginemos a lista citada no início acima, agora eu kero poder selecionar uma das opções e muda-las de ordem, considerando q terei dois botoes, um para mudar pra cima e outro pra mudar pra baixo, a ordem da lista.

    Como faço isso?

  6. Lucas says:

    Perfeito, há muito tempo queria entender essas funções, estão de parabéns, uma explicação clara e fácil de entender, usarei a materia no meu site de downloads

  7. Roberto says:

    Ola, estou com um problema..
    preciso gerar 3 itens aleatorios e fazer uma função para multiplicalos e outra para mostrar os positivos..
    mas quando vou multiplicar ele aparece zero!!
    acho que nao está pegando o valor de cada elemento.
    por favor me de uma luz rsrs..

    segue codigo
    mt obrigado

    var ItemAleatorio = function()
    {
    for (var cont = 0; cont < 3; cont++)
    {
    n = Math.floor(Math.random() * (-20)+10);
    var item = document.createElement("li");
    var txt = document.createTextNode(n);
    item.appendChild(txt);
    var lista = document.getElementById("itens");
    lista.appendChild(item);
    }
    }

    var listaItens=document.getElementsByTagName("li");
    var mult = function()
    {
    var m=1;
    for(var i=0;i< listaItens.length; i++)
    {
    m = m*listaItens[i].value;
    }
    alert(m);
    }

    var positivos = function()
    {
    var p;
    for(var i=0;i 0)
    {

    p[i] = listaItens[i].value;
    }
    }
    console.log(p);
    }

    document.getElementById(“btCriar”).onclick = ItemAleatorio;
    document.getElementById(“btMult”).onclick = mult;
    document.getElementById(“btPosi”).onclick = positivos;

  8. Jean Batista says:

    Alguém ai sabe como recuperar o id de cada item gerado pelo uma lista dinâmica? Preciso do id para saber qual item da lista está sendo cliclado.

Leave a Reply

Your email address will not be published. Required fields are marked *