的appendChild不工作

HTML：的appendChild不工作

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

的JavaScript：

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

當我打電話add，Uncaught TypeError: Object #<NodeList> has no method 'appendChild'被拋出。任何想法爲什麼？

來源

2011-12-06 bingjie2680

如果沒有jQuery，那麼爲什麼把它作爲標籤添加到這個問題呢？ –

對不起,,,我真的不知道它用Jquery標記在哪裏。標籤是javascript和dom。對？ – bingjie2680

當問題被創建時，它被標記爲'jQuery' - Jasper編輯它來代替'javascript'。 –

getElementsByTagName()不返回一個元素，它返回一個NodeList，這是一個類似數組的對象。它基本上意味着你可以使用它作爲一個數組。

所以，你可以舉例來說事：

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

但是你爲什麼不乾脆用getElementById()，如果該列表中有一個ID反正？在整個文檔中ID必須是唯一的，所以這個方法只會返回一個元素。

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

注：請務必申報ul作爲一個局部變量的函數（添加var），除非你是用它的功能外。

來源

2011-12-06 22:06:13 kapa

當我使用getElementById時，控制檯輸出'Uncaught TypeError：無法調用方法'appendChild'null' – bingjie2680

@ bingije2680我的[jsFiddle]（http://jsfiddle.net/CB9tD/）顯示它工作正常:)。請檢查鏈接，如果仍有問題，請創建一個關於您的方案的小提琴。 – kapa

en ...有線...謝謝。 – bingjie2680

document.getElementsByTagName不返回元素，但返回元素數組。

你需要循環這個數組或得到一些獨特的元素。

看看這個文檔：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 
    } 
}

來源

2011-12-06 22:06:35 Edgar

你的問題是，getElementsByTagName()（注意在函數的名稱「S」所隱含的複數）返回陣列DOM節點，而不是一個單一的DOM節點，這是appendChild()預計的工作;因此，你需要確定你要使用哪個節點的數組：

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); 
}

請記住，如果在頁面上有隻一個ul，你可以使用getElementsByTagName("ul")[0]或（這可能是最好）將id屬性添加到該ul，然後用getElementById()將其選中，如預期的那樣，將返回該id。

參考文獻：

getElementsByTagName()。
getElementById()。

來源

2011-12-06 22:06:37

的appendChild不工作

回答

相關問題