Append a List Using Javascript

Question

I'm developing a new project that uses a lot of ul(unordered list) elements and some of this lists sharing the same values, so I want to make a Javascript function to automatize the process by passing a array for the function and returning the HTML for the page. Something like this:

<h1>Test Page</h1>
List fruits:
<script type="text/javascript" charset="utf-8">
    var fruits = ["Banana", "Apple", "Pear", "Strawberry", "Lemon"];
    do_list(fruits);
</script>

That should generate:

<h1>Test Page</h1>
List fruits:
<ul>
    <li>Banana</li>
    <li>Apple</li>
    <li>Pear</li>
    <li>Strawberry</li>
    <li>Lemon</li>
</ul>

How to make this?

cwallenpoole · Accepted Answer · 2011-06-09 13:11:34Z

3

Given a list of values, and the node you'd like to append, this will create li tags for every item in that list.

function do_list(arr, ulNode)
{
    for(var i = 0; i < arr.length; i++)
    {
        var node = document.createNode("li");
        node.nodeValue = arr[i];
        ulNode.appendNodes(node);
    }
}

Here's a better version though, it lets you create arbitrary node types -- you can pass in td as tagName and a tr as parentNode and it would populate that table row.

function do_list(arr, parentNode, tagName)
{
    if(!tagName)tagName="li";
    for(var i = 0; i < arr.length; i++)
    {
        var node = document.createNode(tagName);
        node.nodeValue = arr[i];
        parentNode.appendNodes(node);
    }
}

Use example:

<h1>Test Page</h1>
List fruits:
<ul id="list">
    <li>Banana</li>
    <li>Apple</li>
    <li>Pear</li>
    <li>Strawberry</li>
    <li>Lemon</li>
</ul>
<script type="text/javascript">
    do_list(["Banana", "Apple", "Pear", "Strawberry", "Lemon"], 
            document.getElementById("list"))
</script>

edited Jun 9, 2011 at 13:11

answered Jun 9, 2011 at 12:13

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cwallenpoole Over a year ago

@Hippo While jQuery is awesome, it is often a sledgehammer when a scalpel is better.

Raynos Over a year ago

Please use .nodeValue instead of .innerHTML to assign text content

Nathan Campos Over a year ago

The code won't work, even using your example it won't generate the list... :(

Raynos Over a year ago

@NathanCampos on which browser?

Karl-Bjørnar Øie · Accepted Answer · 2011-06-09 12:12:41Z

0

Something like this?

<script type="text/javascript">
  function do_list(arr) {
    var out = '<ul>';
    for (var k=0; k < arr.length; k++) {
      out += '<li>' + arr[k] + '</li>';
    }
    out += '</ul>';
    return out;
  }
  var fruits = ["Banana", "Apple", "Pear", "Strawberry", "Lemon"];
  document.write(do_list(fruits));
</script>

answered Jun 9, 2011 at 12:12

Karl-Bjørnar Øie

5,5721 gold badge26 silver badges30 bronze badges

2 Comments

Raynos Over a year ago

Don't use document.write please. Especially since your not even bothering to .open or .close the document.

RobG Over a year ago

You don't need to call document.open when using document.write. If the document is closed, calling document.write will call document.open anyway. If the document isn't closed, you don't want to call document.open.

RobG · Accepted Answer · 2011-06-09 12:23:38Z

0

Try:

'<ul><li>' + fruitsArray.join('<li>') + '</ul>';

or as a function:

function arrayToList(array) {
  return '<ul><li>' + array.join('<li>') + '</ul>';
}

or if you really want closed LI tags (which are optional and not necessary in any browser):

function arrayToList(array) {
  return '<ul><li>' + array.join('</li><li>') + '</li></ul>';
}

If you want it inside some element:

function arrayToContainedList(container, array) {
  container.innerHTML = '<ul><li>' + array.join('</li><li>') + '</li></ul>';
}

And so on. I think the approach is clear.

edited Jun 9, 2011 at 12:23

answered Jun 9, 2011 at 12:13

RobG

148k32 gold badges180 silver badges216 bronze badges

5 Comments

J.C. Inacio Over a year ago

the closing tag is missing on every <li>

Hacknightly Over a year ago

This would result in a list of unclosed li's i.e( <li>banana<li>orange<li>pear<li>

RobG Over a year ago

Closing tags for LI elements are optional. But don't let that get in the way of a down vote. :-)

Raynos Over a year ago

" if you really want closed" They are not optional. Browser parse shit HTML because that's how they make money. Write valid and semantic HTML please. or at least reference the W3C spec saying that <li> are optional in HTML4, HTML5 and XHTML

RobG Over a year ago

Raynos - closing tags for LI elements have always been optional, HTML5 doesn't change that. The example in the HTML 4.01 spec (an 11 year old spec) doesn't have closing tags. XHTML is irrelevant, no one actually serves it on the web. The vast majority of pages with XHTML DOCTYPEs are served as HTML (making the DOCTYPE irrelevant) and aren't valid XHTML anyway.

Collectives™ on Stack Overflow

Append a List Using Javascript

3 Answers 3

4 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related