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.

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.

• javascript
• jquery
• xml

2 Answers 2

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

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