[英]Creating an unordered list through javascript
I have created a div using javascript in another function and I have styled it in the function I am about to show (this is all working) I am attempting to fill the div with an unordered list, this is what I have so far: 我在另一个函数中使用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;
}
So the question is, how do I fill the list with the 'sideList' contents and put that list into my 'sideMenu' (AKA var = x) div. 因此,问题是,如何将“ sideList”内容填充到列表中,并将该列表放入“ sideMenu”(又名var = x)div中。 I would also like to avoid JQuery if possible. 如果可能,我也想避免使用JQuery。
You've done almost all of it right, except that: 您几乎正确地完成了所有操作,除了:
You need to append unorderedList
somewhere in the DOM for it to show up on the page. 您需要在DOM中的某个位置附加unorderedList
,以便使其显示在页面上。 If you wnt it to be in sideMenu
, then at the end: 如果您希望将其放置在sideMenu
,那么最后:
x.appendChild(unorderedList);
You've used sideList.Length
instead of sideList.length
(lower case l
on length
). 您已使用sideList.Length
而不是sideList.length
( length
小写字母l
)。 Case matters in JavaScript. JavaScript中的大小写很重要。
Example: 例:
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>
you are only missing 你只想念
x.appendChild(unorderedList);
before the return unorderedList;
在return unorderedList;
之前return unorderedList;
. 。
add x.appendChild(unorderedList);
添加x.appendChild(unorderedList);
and in sideList.Length
l
should be small case 并且在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.