How to scan an array and insert the elements into HTML with JS

Asked

Viewed 3,663 times

4

I am studying the DOM of JS and had some difficulties. I need to show the elements of this vector as li tags of HTML: let nomes = ["Diego", "Gabriel", "Lucas"]; My code is this:

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>
I need the vector to turn into an unordered list, but the code doesn’t work. Does anyone know how to?

javascript html dom

5 answers

6


There are other different ways to create DOM elements, approaching your example can create as follows:

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">

Example in Jsfiddle

5

You can pass a forEach in the array names that way

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

and within it you create your li, adding the textContent, overall your code would look that way: 

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)
        })

    });

just call this function and it will generate the list with the names

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

Hello.

I did using the concept for...of to traverse the vector.

    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>

  • I would like help to complete the list and add the item

  • I do not understand the meaning of this publication, but if you want to ask a new question Click the Ask New Question button. Read [Ask] and [Answer] to get a sense of how the page works. Also do our [tour].

Browser other questions tagged javascript html dom

You are not signed in. Login or sign up in order to post.