1

Estou estudando DOM e estou com dificuldade em inserir um novo <li> e <a> em uma determinada <ul>.

Consegui inserir um novo <li> utilizando o código abaixo, porém não consegui ter sucesso em inserir um novo <a> nesse novo <li>:

Gostaria de inserir o seguinte elemento nesse novo <li>:

<a href ="https://www.jetbrains.com/pycharm/" target = "_blank">PyCharm</a>

Segue o código:

function insereLi(){

    //Adicionar um novo elemento a uma arvore
    //Criar um novo elemento e o armazena em uma variavel
    var newEl = document.createElement('li');

    //Criar um nó de texto e armazenar em uma variável
    var newText = document.createTextNode('Pycharm');

    //Anexar novo nó de texto ao elemento criado
    newEl.appendChild(newText);

    // Localiza a posição onde o elemento deve ser posicionado
    var position = document.getElementsByTagName('ul')[1];

    //insere o novo elemento em sua posição
    position.appendChild(newEl);
}

2 Respostas 2

2

Para o html que está a tentar gerar, falta criar dinamicamente a tag <a>, também através da função createElement. Depois os atributos desse <a> são colocados utilizando setAttribute.

Exemplo:

function insereLi(){
    var newEl = document.createElement('li');
    var newA = document.createElement('a'); //a tag <a> que faltava
    var newText = document.createTextNode('Pycharm');
    var position = document.getElementsByTagName('ul')[0];
    
    //os atributos do <a>
    newA.setAttribute("href", "https://www.jetbrains.com/pycharm/");
    newA.setAttribute("target", "_blank");

    newA.appendChild(newText); //colocar o texto no <a>
    newEl.appendChild(newA); //e o <a> dentro do <li>
    position.appendChild(newEl);
}

document.querySelector("button").addEventListener("click", insereLi);
<button>Insere Li</button><br><br>

Lista
<ul>
  <li>Um item</li>
</ul>

5
  • Eu estava me perguntando porque usar document.createTextNode() ao invés de simplesmente usar a propriedade innerHTML, já que parece mais trabalhoso e até mais custoso pensando logicamente (mais um objeto criado), e vi agora essa resposta: Is there any major difference between innerHTML and using createTextNode to fill a span?. Tinha pensado em colocar na minha resposta uma versão que também adicionasse o tag <a> usando o método createElement(), mas não fiz, e você respondeu quase junto e fez assim. Votei na sua resposta! ;-) 6/11/2018 às 4:14
  • 1
    @PedroGaspar innerHTML é naturalmente mais simples mas eu optei por manter o estilo que o AP tinha. Ainda assim tem uma ou outra diferença subtil que pode ou não ser relevante, como por exemplo injeção de JS.
    – Isac
    6/11/2018 às 5:05
  • Ah sim, eu também pensei em usar o createTextNode para seguir o mesmo estilo, só que optei por mostrar uma forma diferente, entretanto queria mostrar a forma com createTextNode também, mas felizmente você supriu essa necessidade! Posso acrescentar essas informações sobre a diferença entre os dois na minha resposta ou você irá adicionar na sua? 6/11/2018 às 10:32
  • @PedroGaspar Assim como eu mais tarde pensei em colocar uma alternativa com innerHTML mas depois quando reparei já lá estava a sua resposta com essa alternativa :D. Esteja à vontade para colocar as diferenças, que é algo que enriquece a resposta.
    – Isac
    6/11/2018 às 10:36
  • Bom dia @Isac. Consegui implementar com sucesso sua colaboração na minha primeira pagina de estudo. maxwneto.github.io Obrigado pela ajuda.
    – Max Wilson
    6/11/2018 às 13:25
1

Você pode fazer da seguinte forma:

function insereLi(texto)
{
  // Localiza o elemento <ul> através do seu id, usando getElementById().
  var minhaLista = document.getElementById('minhaListaDesordenada');

  // Cria um novo elemento <li> no documento.
  var newLi = document.createElement('li');
  // Informa o texto do novo elemento <li>.
  newLi.textContent = texto;

  // Insere o novo elemento <li> na lista <ul>.
  minhaLista.appendChild(newLi);
}

function insereLiComLink(url, descricao)
{
  // Localiza o elemento <ul> através do seu id, usando querySelector().
  var minhaLista = document.querySelector('#minhaListaDesordenada');

  // Cria um novo elemento <li> no documento.
  var newLi = document.createElement('li');
  // Informa o texto do novo elemento <li>.
  newLi.innerHTML = '<a href ="' + url + '" target = "_blank">' + descricao + '</a>';

  // Insere o novo elemento <li> na lista <ul>.
  minhaLista.appendChild(newLi);
}

// Testa as duas funções criando mais 3 elementos <li> à lista <ul>.
insereLi('Item dinâmico 1')
insereLiComLink('https://www.jetbrains.com/pycharm/', 'PyCharm')
insereLi('Item dinâmico 3')
<ul id="minhaListaDesordenada">
<li>Item fixo</li>
</ul>

A primeira função, insereLi(), insere um elemento <li> apenas com texto, e ela usa o método document.getElementById() (documentação) para achar a lista <ul> pelo seu id (que deve ser único), e depois usa a propriedade textContent (documentação) do novo elemento <li>, já que estamos inserindo somente texto.

Já a segunda função, insereLiComLink(), recebe um URL e uma descrição, para montar um elemento <a> dentro do elemento <li>. Nessa função usei o document.querySelector() (documentação) para achar a lista <ul> pelo seu id, para mostrar uma alternativa. Aqui usei a propriedade innerHTML (documentação) para acrescentar o elemento <a> dentro do novo elemento <li>.

A resposta do Isac mostra como adicionar o elemento <a> ao <li> usando document.createElement() e document.createTextNode.

Pelas pesquisas que eu fiz (What Is A Text Node, Its Uses?), porque eu tinha essa dúvida e a resposta do Isac me fez pensar sobre isso, algumas diferenças entre usar element.innerHTML e document.createTextNode()+element.appendChild(textNode) são:

  • A propriedade innerHTML é mais recente e o jeito "antigo" era usar o createTextNode();
  • Por isso mesmo, o método createTextNode() pode ser mais compatível com a maioria dos navegadores;
  • Eu achava que usar o método createTextNode() seria mais custoso, por criar um novo objeto, mas o que a propriedade innerHTML faz no fundo é analisar (parse) o HTML e criar os nós necessários, inclusive os nós de texto, porque o DOM (Document Object Model) "organiza" todo seu conteúdo como ramos de uma árvore, que terminam em nós, e cada nó contém objetos, então no fundo, objetos serão criados de qualquer forma, mesmo para um simples texto dentro de uma tag;
  • Justamente pelo fato da propriedade innerHTML analisar (parse) o HTML, o uso dela pode causar um risco de segurança, se forem usados valores recebidos de input do usuário para prencher a propriedade, porque ela pode ser usada para injeção de scripts.
3
  • Bom dia @Pedro Gaspar. Muito obrigado pela colaboração. Consegui entender sua solução mas mantive no código a solução do Isac por ser o que eu havia pensado mas não consegui evoluir com a solução. Mas é muito bom ter uma segunda linha de raciocinio. Abraços.
    – Max Wilson
    6/11/2018 às 13:29
  • Que bom que ajudou Max! Mas, aqui a melhor forma de agradecer por uma resposta é marcando ela como aceita (clicando no "sinal de visto", ✓, logo abaixo da seta para baixo), veja essa página: O que eu devo fazer se alguém responder minha pergunta? e Por que é importante votar?. Então depois aceite a resposta do Isac, por favor (além de tudo você ainda ganha 2 pontos por isso). Aproveite também para visitar a página de boas-vindas do site. 6/11/2018 às 14:18
  • Obrigado novamente.
    – Max Wilson
    6/11/2018 às 15:17

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 .