jak dodać nowe <li> do <ul> onclick z javascript


87

Jak dodać element listy do istniejącego ul za pomocą funkcji onclick? Potrzebuję go, aby dodać do tego typu listy ...

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

... kolejny element listy z identyfikatorem „element4” i tekstem „Cztery” pod nim. Wypróbowałem tę funkcję, ale nie działa ...

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

Nie znam JQuery, więc proszę tylko o Javascript. Dziękuję Ci!!

Odpowiedzi:


172

Nie dołączyłeś swojego lidziecka do swojego ulelementu

Spróbuj tego

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

Jeśli chcesz ustawić identyfikator, możesz to zrobić przez

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

Co zamienia funkcję na

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

Już prawie byłeś:

Wystarczy dołączyć lido uli voila!

Więc po prostu dodaj

ul.appendChild(li);

do końca twojej funkcji, więc funkcja end będzie wyglądać tak:

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

11

Najpierw musisz utworzyć li(z identyfikatorem i wartością zgodnie z wymaganiami), a następnie dodać go do swojego 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)
}

Sprawdź ten przykład, który dodaje lielement do ul.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.