como adicionar novo <li> a <ul> onclick com javascript


87

Como adiciono um elemento de lista a um ul existente usando uma função de um onclick? Eu preciso adicionar a este tipo de lista ...

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul> 

... outro item da lista com o id "element4" e o texto "Four" embaixo dele. Tentei esta função mas não funciona ...

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

Não conheço JQuery, então apenas Javascript. Obrigado!!

Respostas:


172

Você não anexou seu lifilho ao seu ulelemento

Tente isto

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
}

Se você precisar definir o id, pode fazer isso

li.setAttribute("id", "element4");

O que transforma a função em

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  li.setAttribute("id", "element4"); // added line
  ul.appendChild(li);
  alert(li.id);
}

13

Você estava quase lá:

Você só precisa anexar o lipara ule voila!

Então, basta adicionar

ul.appendChild(li);

ao final de sua função para que a função final seja assim:

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
  ul.appendChild(li);
}

11

Primeiro você deve criar um li(com id e valor conforme necessário) e depois adicioná-lo ao seu ul.

Javascript ::

addAnother = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}

Verifique este exemplo ao qual adiciona lielemento ul.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.