0

Estou tentando realizar uma operação de inserção em meu código JavaScript, mas estou com algumas dificuldade na utilização da função insertBefore.

Primeiro estou criando um elemento do tipo "ul" e realizando a inserção dele dessa maneira:

  var novaLista = document.createElement("ul");
  novaLista.setAttribute("class", "itens1 estilo-itens");

  var div = document.getElementById("lista");
  div.insertBefore(novaLista, div.childNodes[0]);

Agora estou tentando inserir alguns elementos do tipo "li" nesse elemento criado anteriormente, realizando o seguinte código:

  var elemento = document.createElement("li");
  elemento.setAttribute("class", "item");
  var textoElemento = document.createTextNode("elemento");
  elemento.appendChild(textoElemento);

  var list = document.getElementsByClassName('itens1');
  list.insertBefore(elemento, list.childNodes[0]);

Mas o seguinte erro é retornado:

Cannot read property '0' of undefined

Quando realizo o debugging do código percebo que o erro acontece quando estou tentando adicionar o elemento do tipo "li", mas especificamente na linha do insertBefore. Lendo a documentação disponível aqui eu precisaria de uma referencia dentro do elemento "ul" o que na ocasião eu não tenho, teria alguma outra maneira de adicionar esse elemento "li"?

1 Resposta 1

1

A função getElementsByClassName retorna uma lista de elementos que possuem determinada classe.

Então para seu código funcionar você deve especificar o índice do elemento, como nesse cenário existe apenas um elemento com essa classe, você deve usar o primeiro item da lista:

list[0].insertBefore(elemento, list[0].childNodes[0]);

Exemplo Funcional:

	var novaLista = document.createElement("ul");
	novaLista.setAttribute("class", "itens1 estilo-itens");

	var div = document.getElementById("lista");
	div.insertBefore(novaLista, div.childNodes[0]);

	var elemento = document.createElement("li");
	elemento.setAttribute("class", "item");
	var textoElemento = document.createTextNode("elemento");
	elemento.appendChild(textoElemento);

	var list = document.getElementsByClassName('itens1');
	list[0].insertBefore(elemento, list[0].childNodes[0]);
<div id="lista">

</div>

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 .