2012-09-19 50 views
5

我嘗試新的元素添加到無序列表用下面的代碼:添加新的列表元素的無序列表使用Javascript

的HTML:

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Javascript</title> 
<link rel="stylesheet" href="jsPlay.css" type="text/css" /> 
<script src="jsPlay.js"></script> 
</head> 

<body> 

<ul id="numberList"></ul> 

</body> 
</html> 

的JavaScript:

window.onload = function() 
{ 
    //alert("Window is loaded"); 

    var numberList = document.getElementById("numberList"); 


    //for every number between 100 and 200  
    for(var i = 0; i > 100 && i < 200; i++) 
    { 
     if (i % 17 == 0 && i % 2 == 0) //if number evenly divisible by 17 and 2 
     { 
        //create new li element 
      var newNumberListItem = document.createElement("li"); 

        //create new text node 
      var numberListValue = document.createTextNode(i); 

        //add text node to li element 
      newNumberListItem.appendChild(numberListValue); 

        //add new list element built in previous steps to unordered list 
        //called numberList 
      numberList.appendChild(newNumberListItem); 

     } 
    } 
} 

當我在瀏覽器中執行此操作時,我只得到了空白區域。我檢查FireBug(在Firefox 15.0.1上)以查看是否有任何錯誤,但沒有任何明顯的跡象。我認爲我沒有正確地將某些東西綁定在一起 - 這看起來像是一個基本問題,但我似乎無法弄清楚爲什麼這些元素沒有被添加到無序列表中。

我確定在Javascript代碼中的評論是足夠的,但如果不是,請隨時問我問題。

非常感謝您的幫助:)。

+0

在這裏你有一些性能問題。您應該使用「var dc = document.createDocumentFragment()」,並且在將所有列表元素添加到「dc」之後,您應該一次將html片段添加到列表中。 – DevWL

回答