1

Eu estou tentando criar uma parte do menu superior com EcmaScript em vez de html puro, porém não estou entendendo o que falta para acrescentar o elemento.

Código HTML

  <div class="rd-navbar-cell rd-navbar-nav-wrap" id="list">

       <ul class="rd-navbar-nav rd-navbar-nav-default">
             <!-- Queria que os elementos que estão no Array vão parar aqui -->
      </ul>

 </div>

Código EcmaScript:

var listElement = document.querySelector("#list ul")
var listsElement = ['Home',
                    'Cursos',
                    'Promoções',
                    'Eventos',
                    'Blog',
                    'Quem-somos',
                    'Soluções Corporativas',
                    'Parceiros' 
                    ]
var x = listsElement.map(function(item){

    return item;

})

listElement.createElement('li')
listElement.appendChild(x)

Sinto que está faltando alguma coisa para acrescentar ou está errado... Alguém poderia me explicar?

1 Resposta 1

0

Aluns erros de lógica:

  • tens de usar o createElement uma vez para cada `li``
  • o createElement é um método de document
  • para adicionar conteudo podes usar o textContent
  • usa .forEach o .map não é possível inserir em bruto

Exemplo:

var listElement = document.querySelector("#list ul")
var listsElement = ['Home',
  'Cursos',
  'Promoções',
  'Eventos',
  'Blog',
  'Quem-somos',
  'Soluções Corporativas',
  'Parceiros'
]
listsElement.forEach(function(tipo) {
  const li = document.createElement('li')
  li.textContent = tipo;
  listElement.appendChild(li)
});
<div class="rd-navbar-cell rd-navbar-nav-wrap" id="list">

  <ul class="rd-navbar-nav rd-navbar-nav-default">
    <!-- Queria que os elementos que estão no Array vão parar aqui -->
  </ul>

</div>

2
  • Opa @Sergio obrigado pela resposta, eu pensava que .map tinha o mesmo efeito de um foreach.
    – user152996
    23/07/2019 às 19:02
  • 1
    @RodrigoPires mais ou menos... semânticamente são diferentes, o .map é para criar uma nova array. Mas na prática ambas percorrem a array.
    – Sergio
    23/07/2019 às 20:18

Você deve fazer log-in para responder a esta pergunta.