cách thêm mới <li> vào <ul> onclick bằng javascript


87

Làm cách nào để thêm một phần tử danh sách vào một ul hiện có bằng cách sử dụng một hàm từ onclick? Tôi cần nó để thêm vào loại danh sách này ...

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

... một mục danh sách khác có id "element4" và văn bản "Four" dưới đó. Tôi đã thử chức năng này nhưng nó không hoạt động ...

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

Tôi không biết JQuery nên chỉ Javascript. Cảm ơn bạn!!

Câu trả lời:


172

Bạn đã không thêm bạn likhi còn nhỏ vào ulphần tử của bạn

Thử đi

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

Nếu bạn cần đặt id, bạn có thể làm như vậy bằng cách

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

Điều này biến chức năng thành

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

Bạn gần như đã ở đó:

Bạn chỉ cần nối livào ulvà thì đấy!

Vì vậy, chỉ cần thêm

ul.appendChild(li);

đến cuối hàm của bạn, vì vậy hàm kết thúc sẽ như thế này:

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

11

Đầu tiên, bạn phải tạo một li(với id và giá trị theo yêu cầu của bạn) sau đó thêm nó vào của bạn 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)
}

Kiểm tra ví dụ này để thêm liphần tử vào ul.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.