Saturday, March 10, 2012

HTML/Javscript - Create List items dynamically

HTML/Javscript - Create List items dynamically
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML/Javscript - Create List items dynamically</title>

<script>

var montharray = new Array("January",
         "February",
         "March",
         "April",
         "May",
         "June",
         "July",
         "August",
         "September",
         "October",
         "November",
         "December");
         
var weekdayarray = new Array ("Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday");

function onloaded(){
 var ulist = document.getElementById("unorderedlist");
 var olist = document.getElementById("orderedlist");

 //Generate list items for <ul>
 for (var i = 0; i < montharray.length; i++) {
  var li = document.createElement("li");
  li.innerHTML = montharray[i];
  ulist.appendChild(li);
 }
 
 //Generate list items for <ol>
 for (var i = 0; i < weekdayarray.length; i++) {
  var li = document.createElement("li");
  li.innerHTML = weekdayarray[i];
  olist.appendChild(li);
 }
}
</script> 
 
</head>
<body onload="onloaded()">

<ul id="unorderedlist"></ul>
<ol id="orderedlist"></ol>

</body>
</html>

Related: - jQuery Mobile - Create List items dynamically

No comments:

Post a Comment