Any reason why this isn't working? Seems simple enough. I get this error in the console. I'm trying to populate the unordered list using the values from the array.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="intro.js"></script>
</head>
<body>
<div id="container">
<div id="main">
<ul id="menu"></ul>
</div>
</div>
</body>
</html>
JS:
var container = document.getElementById("container");
var menuItems = ["Home","About","Contact Us", "Sign in"];
$(document).ready(function (){
console.log("Populating menu");
var elem = document.getElementById('menu');
for(var i=0;i<menuItems.length;i++){
elem.appendChild("<li id='" + menuItems[i] + "'>" + menuItems[i] + "</li>" );
}
console.log('menu populated.');
});
Any reason why this isn't working? Seems simple enough. I get this error in the console. I'm trying to populate the unordered list using the values from the array.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="intro.js"></script>
</head>
<body>
<div id="container">
<div id="main">
<ul id="menu"></ul>
</div>
</div>
</body>
</html>
JS:
var container = document.getElementById("container");
var menuItems = ["Home","About","Contact Us", "Sign in"];
$(document).ready(function (){
console.log("Populating menu");
var elem = document.getElementById('menu');
for(var i=0;i<menuItems.length;i++){
elem.appendChild("<li id='" + menuItems[i] + "'>" + menuItems[i] + "</li>" );
}
console.log('menu populated.');
});
-
What is
containerused for? Why is it selected outside ofready? – Bergi Commented Dec 11, 2013 at 21:46 - NO reason. Just thought I'd use it at some point so I grabbed it. – Batman Commented Dec 11, 2013 at 21:46
- 2 What does not work? Please state your problem explicitly. Is your question title some kind of error message? If so, where did it happpen? – Bergi Commented Dec 11, 2013 at 21:47
- Trying to populate UL using what's in the array on load. – Batman Commented Dec 12, 2013 at 2:22
2 Answers
Reset to default 5If you want to stick to 100% JavaScript, use document.createElement("li")
Here's a jsfiddle
var ul = document.getElementById("myID")
for (var i = 0; i < 10; i++){
var li = document.createElement("li");
li.setAttribute("id", "myLI" + i);
li.innerText = "Hello " + i
ul.appendChild(li)
}
Stick with jQuery, appendChild doesn't accept strings, only nodes
$(document).ready(function (){
var container = $("#container"),
elem = $('#menu'),
menuItems = ["Home", "About", "Contact Us", "Sign in"];
$.each(menuItems, function(idx, item) {
$('<li />', {
id : item.replace(/\s+/,'_'), // no spaces here
text : item
}).appendTo(elem);
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745137358a4613267.html
评论列表（0条）