Using JavaScript to Display Lists (ul/ol)

+1 Kumi Festus · July 7, 2014
Does anyone know how to use JavaScript to display ordered and unordered Lists?

Post a Reply

Replies

Oldest  Newest  Rating
0 Ethan Fraser · July 10, 2014
You'll have to be a bit more specific. If you mean displaying them in a div it would appear something like:



<div id="ulDiv">

</div>

<div id="olDiv">

</div>

<script>

document.getElementById("ulDiv").innerHTML = "<ul><li>Unordered list item 1</li><li>Unordered list item 2</li><li>Unordered list item 3</li></ul>";

document.getElementById("olDiv").innerHTML = "<ol><li>Ordered list item 1</li><li>Ordered list item 2</li><li>Ordered list item 3</li></ol>";

</script>


Could probably be better but that's the basics of how to do it.
0 Kumi Festus · July 10, 2014
This is how I meant it:

 

var fruits = new Array("Apples","Bananas","Pineapples","Peaches","Grapes");

document.write(
"<ul>"
+ "<li>" + fruits[0] + "</li>"
+ "<li>" + fruits[1] + "</li>"
+ "<li>" + fruits[2] + "</li>"
+ "<li>" + fruits[3] + "</li>"
+ "<li>" + fruits[4] + "</li>"
+
"</ul>"
);


This is what I created and it worked fine. I have not seen anyone do it before but I am sure it has been somewhere. You can also test it.

var fruits = new Array("Apples","Bananas","Pineapples","Peaches","Grapes");

document.write(
"<ol>"
+ "<li>" + fruits[0] + "</li>"
+ "<li>" + fruits[1] + "</li>"
+ "<li>" + fruits[2] + "</li>"
+ "<li>" + fruits[3] + "</li>"
+ "<li>" + fruits[4] + "</li>"
+
"</ol>"
);


0 Ethan Fraser · July 10, 2014
I have no doubt that that would work. The only reason that I don't use document.write() is because it just adds to the page whereas document.getElementById("").innerHTML has a fair bit more control. That's my reasoning behind the difference of process. Apart from that you could do the same thing really. You could have typed yours out differently, for formatting sakes your code is nice as each <li> is on an easily editable line but you could have used less lines if you wished.
0 Kumi Festus · July 10, 2014
Yes, you are right. On my own testing environment, I wrote everything on a single line( I mean outputting it),
I did it this way for more clarity.
Thanks for your careful observation.
0 Kumi Festus · July 19, 2014

This is very complex. I will try it though and how it works

+2 Samuel Oloruntoba · July 19, 2014
Here is my own simple explanation.

Say you have a div with an id of placeholder


<div id="placeholder"></div>


and inside this div you want to put an un-ordered list that looks like this

<ul>
<li>Appples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Peaches</li>
<li>Grape</li>
</ul>


well, what i would suggest you do

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');

// say that fruits contains all your data
var fruits = ['Apples','Bananas','Pineapples','Peaches','Grapes'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
// create an arbitrary li element
var li = document.createElement('li'),
 content = document.createTextNode(fruits); // create a textnode to the document

  li.appendChild(content); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}

div.appendChild(ul); // finally the ul element to the div with an id of placeholder



i created a simple demonstration at http://codepen.io/anon/pen/lspah
check out this page https://buckysroom.org/page.php?pid=517
+1 Samuel Oloruntoba · July 19, 2014
Here is my own simple explanation.

Say you have a div with an id of placeholder


<div id="placeholder"></div>


and inside this div you want to put an un-ordered list that looks like this

<ul>
<li>Appples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Peaches</li>
<li>Grape</li>
</ul>


well, what i would suggest you do

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');

// say that fruits contains all your data
var fruits = ['Apples','Bananas','Pineapples','Peaches','Grapes'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
       // create an arbitrary li element
var li = document.createElement('li'),
 content = document.createTextNode(fruits); // create a textnode to the document

  li.appendChild(content); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}

div.appendChild(ul); // finally the ul element to the div with an id of placeholder



i created a simple demonstration at http://codepen.io/anon/pen/lspah
check out this page https://buckysroom.org/page.php?pid=517
  • 1

Javascript

106,992 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators