Adding elements to unordered list

Question

I'm trying to add an li to a ul using jquery and can't get it to work. I am using the following code.

I have read an XML file which is in the following format for example,

<Products>
    <Description>Pound</Description>
    <ProductType>CUR</ProductType>
    <CurrencyCode>GBP</CurrencyCode>
    <Rate>1</Rate></ProductRate>
    <Description>Euro</Description>
    <ProductType>CUR</ProductType>
    <CurrencyCode>Eur</CurrencyCode>
    <Rate>1.5</Rate></ProductRate>
</Products>

I am trying to use jquery to create a list of the products but it keeps adding them as 1 li element and not multiple li's where list is the actual list,

I am using the following jquery

var $xml = $(xml);
var $list = $('#list');
$description = $xml.find("Description");
$( "#list" ).append($description.text());`

This reads the elements but adds them as a single li element

<ul>
  <li>
    Pound GBP Euro Eur
  </li>
</ul>

I have also tried

$( "#list" ).append("<li>"+$description.text()+"</li>");

but this still delivers the same html. So my question is how do I ensure they are shown as separate li elements?

Claudio Redi · Accepted Answer · 2013-08-28 18:22:33Z

3

Try with

$description.each(function() {
    $("#list").append("<li>" + $(this).text() + "</li>");
});

DEMO

answered Aug 28, 2013 at 18:22

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

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

1 Comment

aldo Over a year ago

using the same XML is it possible within the each function to grab the 'rate' by doing something like $rate = $xml.find("Rate"); $( "#list" ).append($rate.text());

flakomalo · Accepted Answer · 2013-08-28 18:24:38Z

2

Try to iterate through each of the elements being read:

$xml.find("Description").each(function(){
     $( "#list" ).append("<li>"+$(this).text()+"</li>");
});

answered Aug 28, 2013 at 18:24

flakomalo

7105 silver badges4 bronze badges

Collectives™ on Stack Overflow

Adding elements to unordered list

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related