appendChild Không Working

Question

HTML:

<ul id="datalist"> 
</ul> 

JavaScript:

function add(content){ 
    ul=document.getElementsByTagName("ul"); 
    var li=document.createElement("li"); 
    li.innerHTML=content; 
    ul.appendChild(li); 
} 

Khi tôi gọi add, Uncaught TypeError: Object #<NodeList> has no method 'appendChild' được ném. Bất kỳ ý tưởng tại sao?

Answer 1

getElementsByTagName() không trả về một phần tử, nó trả về một NodeList, một đối tượng giống như mảng. Về cơ bản nó có nghĩa là bạn có thể sử dụng nó như một mảng.

Vì vậy, bạn có thể làm ví dụ:

var ul = document.getElementsByTagName("ul")[0]; 

Nhưng tại sao bạn không chỉ cần sử dụng getElementById(), nếu danh sách đó có một ID anyways? ID phải là duy nhất trong toàn bộ tài liệu, do đó, phương thức này sẽ chỉ trả lại một phần tử.

var ul = document.getElementById('datalist'); 

---

Lưu ý: Hãy chắc chắn để khai báo ul như là một biến địa phương để chức năng của bạn (thêm var), trừ khi bạn có ý nghĩa để sử dụng nó bên ngoài hàm.

Answer 2

document.getElementsByTagName không trả lại Phần tử, nhưng trả về một mảng các phần tử.

Bạn cần lặp mảng này hoặc nhận một số Phần tử duy nhất.

Look tài liệu này: https://developer.mozilla.org/en/DOM/element.getElementsByTagName

// check the alignment on a number of cells in a table. 

var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    var status = cells[i].getAttribute("data-status"); 
    if (status == "open") { 
     // grab the data 
    } 
} 

Answer 3

Vấn đề bạn có được mà getElementsByTagName() (lưu ý số nhiều ngụ ý bởi 's' trong tên của hàm) trả về một mảng các nút DOM, không một nút DOM duy nhất, đó là những gì appendChild() hy vọng sẽ hoạt động; do đó bạn cần phải xác định các mảng của các nút bạn muốn làm việc với:

function add(content){ 
    ul=document.getElementsByTagName("ul")[0]; // the [0] identifies the first element of the returned array 
    var li=document.createElement("li"); 
    li.innerHTML=content; 
    ul.appendChild(li); 
} 

Hãy nhớ rằng nếu chỉ có mộtul trên trang web, bạn có thể sử dụng getElementsByTagName("ul")[0]hoặc (và điều này có thể là một lợi thế) thêm thuộc tính id vào số ul và sau đó chọn thuộc tính đó với getElementById(), theo dự kiến, chỉ trả về một số id.

Tài liệu tham khảo:

• getElementsByTagName().
• getElementById().