Create unordered list dynamically using jQuery

Question

How can I create an unordered list dynamically using jQuery? I read the image file path (href and src) from an XML file.

 <ul>
       <li><a href="images/test1.png"><img id="imageSlide" src="images/test1.png" alt="" /></a></li>
       <li><a href="images/test2.png"><img id="imageSlide" src="images/test2.png" alt="" /></a></li>
 </ul>

It should create unordered list based on number of XML nodes in the XML file.

jAndy · Accepted Answer · 2010-08-18 06:33:36Z

6

Well, you have to loop over your XML structure and create new LI nodes in the body of that.

var dummyXML = "<foo><dummy>element</dummy><dummy>element</dummy><dummy>element</dummy></foo>";
var HTMLmarkup = '';

$(dummyXML).find('dummy').each(function(){
   HTMLmarkup += '<li>' + $(this).text() + '</li>';
});

$('ul').append(HTMLmarkup);

That of course, is just a dummy example. Infact you should consider to use more sophisticated XML traversal systems like XPath (depending on how big your XML file is).

answered Aug 18, 2010 at 6:33

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

1 Comment

petr Over a year ago

@YoniH How is that not using jQuery?

Felix · Accepted Answer · 2010-08-18 06:48:36Z

0

$('ul li').text(function(index) {
  return '<a href=images/test' +index +'><img id="imageSlide" src="images/test'+index+'.png" alt="" /></a>';
});

answered Aug 18, 2010 at 6:48

Felix

3,1447 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Create unordered list dynamically using jQuery

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