create unordered list dynamically using jquery

Question

hello folks.,

how to create unordered list dynamically using jquery? i read the image filepath(href and src) from 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>

based on number of xmlnodes in xml file it should create unordered list..

thank you

Answer 1

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).

Answer 2

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