4

Estou estudando a DOM do JS e tive umas dificuldades.Preciso mostrar os elementos desse vetor como tags li do HTML: let nomes = ["Diego", "Gabriel", "Lucas"]; Meu código é esse:

function gerar(){
    let nomes = ["Diego", "Gabriel", "Lucas"];
    let lista = document.querySelector('#lista');
    let item = document.createElement('li');
    for(let item of nomes){
        lista.appendChild(item);
    }
}
    <input type="button" onclick="gerar()" value="Clique">
    <ul id="lista">
        
    </ul>
    <script src="index.js"></script>
Preciso que o vetor vire uma lista não ordenada, mas o código não funciona. Alguém sabe como fazer?

5 Respostas 5

7

Existem outras diferentes formas de se criar elementos DOM, aproximando ao teu exemplo pode criar da seguinte forma:

function gerar(){
    let nomes = ["Diego", "Gabriel", "Lucas"];
    let lista = document.getElementById('lista');
    for(var i = 0; i < nomes.length; i++){
        let item = document.createElement('li');
        item.appendChild(document.createTextNode(nomes[i]));
        lista.appendChild(item);
    }
}
<ul id="lista"></ul>
<input type="button" onclick="gerar()" value="Clique">

Exemplo no JSFiddle

5

Você pode passar um forEach no array nomes dessa forma

nomes.forEach(n=>{
  item = document.createElement('li')
  item.textContent = n
  lista.appendChild(item)
})

e dentro dele você cria seu li, adicionando o textContent, no geral seu código ficaria dessa forma:

function gerar() {
        let nomes = ["Diego", "Gabriel", "Lucas"];
        let lista = document.querySelector('#lista');
        let item;

        nomes.forEach(n=>{
            item = document.createElement('li')
            item.textContent = n
            lista.appendChild(item)
        })

    });

basta chamar essa função que ele irá gerar a lista com os nomes

1
var nomes = ["Diego", "Gabriel", "Lucas"];

function criarLista(nomeRecebido){ //recebe os valores que estão na lista 'nomes'
   var lista = document.createElement('li');
                
   var listabox = document.querySelector('.lista-box');
   listabox.appendChild(lista); 
                
   var listanome = document.createTextNode(nomeRecebido);
   lista.appendChild(listanome);
}; 
                        
nomes.forEach(function(nome) { //coloca no parâmetro nome, cada valor do array             
   criarLista(nome);           //passa esses valores para a função 'criarLista'
});
       

1

Olá.

Eu fiz utilizando o conceito for...of para percorrer o vetor.

    function listarNomes() {
        var nomes = ["Diego", "Gabriel", "Lucas"];
        var listElement = document.createElement('ul');

        for (var value of nomes){
            var itemElement = document.createElement('li');
            itemElement.appendChild(document.createTextNode(value));
            listElement.appendChild(itemElement);
        }

        var containerElement = document.querySelector('#app');
        containerElement.appendChild(listElement);
    }
-1
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Exercicio 3</title>
</head>
<body>
    <ul id="lista"></ul>
    <input type="text" name="nome" id="camps" >
    <button type="submit" onclick="gerar()" value="Clique">Clique</button>

    <script>
        function gerar(){
         let nomes = ["Diego", "Gabriel", "Lucas"];
         let lista = document.getElementById('lista');
           for(var i = 0; i < nomes.length; i++){
            let item = document.createElement('li');
              
           let x = document.getElementById("camps").value;
            document.getElementById("lista").innerHTML = x;

             item.appendChild(document.createTextNode(nomes[i]));
             lista.appendChild(item);
    }
        
           
}
           
    </script>
</body>
</html>
2

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 .