通過javascript創建無序列表

Question

我在另一個函數中使用javascript創建了一個div，並在我將要展示的函數中對其進行了樣式設置（這一切正常），我試圖用一個無序列表填充div，這是我到目前為止的內容：

function LeftSideMenu() {
// getting the javascript named div
var x = document.getElementById("sideMenu");

// Styling the div
x.style.width = "300px";
x.style.height = "750px";
x.style.position = "absolute";
x.style.padding = "0px 0px 0px 0px";
x.style.border = "thick solid #901709";
x.style.borderWidth = "10px";
x.style.background = "#c01e0c";

var sideList = ['About', 'Players', 'Achievements']
var unorderedList = document.createElement('ul');

for (var i = 0; i < sideList.Length; i++) {

    // Create a new 'LI' element for each part of the sideList array
    var theList = document.createElement('li');

    // Set the contents of the list seen in "sideList"
    theList.appendChild(document.createTextNode(sideList[i]));

    // Appened the list to the unorderedList
    unorderedList.appendChild(theList);
}

// Return the occupied list
return unorderedList;
}

因此，問題是，如何將“ sideList”內容填充到列表中，並將該列表放入“ sideMenu”（又名var = x）div中。 如果可能，我也想避免使用JQuery。

Answer 1

您幾乎正確地完成了所有操作，除了：

1. 您需要在DOM中的某個位置附加unorderedList ，以便使其顯示在頁面上。 如果您希望將其放置在sideMenu ，那么最后：

    x.appendChild(unorderedList); 

2. 您已使用sideList.Length而不是sideList.length （ length小寫字母l ）。 JavaScript中的大小寫很重要。

例：

 function LeftSideMenu() { // getting the javascript named div var x = document.getElementById("sideMenu"); // Styling the div x.style.width = "300px"; x.style.height = "750px"; x.style.position = "absolute"; x.style.padding = "0px 0px 0px 0px"; x.style.border = "thick solid #901709"; x.style.borderWidth = "10px"; x.style.background = "#c01e0c"; var sideList = ['About', 'Players', 'Achievements'] var unorderedList = document.createElement('ul'); for (var i = 0; i < sideList.length; i++) { // Create a new 'LI' element for each part of the sideList array var theList = document.createElement('li'); // Set the contents of the list seen in "sideList" theList.appendChild(document.createTextNode(sideList[i])); // Appened the list to the unorderedList unorderedList.appendChild(theList); } // Append the list to the menu div *** x.appendChild(unorderedList); // *** // Return the occupied list return unorderedList; } LeftSideMenu(); 

 <div id="sideMenu"></div> 

Answer 2

你只想念

x.appendChild(unorderedList);

在return unorderedList;之前return unorderedList; 。

Answer 3

添加x.appendChild(unorderedList); 並且在sideList.Length l應該是小寫

 function LeftSideMenu() { // getting the javascript named div var x = document.getElementById("sideMenu"); // Styling the div x.style.width = "300px"; x.style.height = "750px"; x.style.position = "absolute"; x.style.padding = "0px 0px 0px 0px"; x.style.border = "thick solid #901709"; x.style.borderWidth = "10px"; x.style.background = "#c01e0c"; var sideList = ['About', 'Players', 'Achievements']; var unorderedList = document.createElement('ul'); for (var i = 0; i < sideList.length; i++) { // Create a new 'LI' element for each part of the sideList array var theList = document.createElement('li'); // Set the contents of the list seen in "sideList" theList.appendChild(document.createTextNode(sideList[i])); // Appened the list to the unorderedList unorderedList.appendChild(theList); } // Return the occupied list x.appendChild(unorderedList); return; } window.onload=function(){ LeftSideMenu(); } 

 <div id="sideMenu"></div>