AJAX to load XML with images

[Rooggence]

I'm new to the world of AJAX, so please forgive my n00bishness. I have an XML document which looks like this:\[code\]<juices><smoothie id="SY4301"> <name>Strawberry Yumghurt</name> <price currency="GBP"> <perunit type="wholesale">1.23</perunit> <perunit type="RRP">1.89</perunit> <percrate>28.50</percrate> </price> <description>Velvety yoghurt smoothie made with fresh strawberry and rasperries.</description> <ingredients> <ingredient image="/images/strawberry.jpg" quantity="9">Strawberries</ingredient> <ingredient image="/images/Raspberry.jpg" quantity="4">Raspberries</ingredient> <ingredient image="/images/yoghurt.jpg"quantity="200ml">Greek Yoghurt</ingredient> <ingredient image="/images/honey.jpg" quantity="30ml">Runny Honey</ingredient> <ingredient image="/images/milk.jpg"quantity="40ml">Semi-skimmed Milk</ingredient> </ingredients> <nutrition per="100ml"> <kcal unit="cal">140</kcal> <kjoules unit="KJ">442</kjoules> <carbohydrate unit="g">27.9</carbohydrate> <protein unit="g">1.4</protein> <fat unit="g">8.4</fat> <fibre unit="g">2.8</fibre> </nutrition> <imageloc>http://www5.bbk.ac.uk/~akaufm01/jvfma/Images/Products/morning_kick.jpg</imageloc></smoothie></juices>\[/code\]I have an XSL document that is loading everything but the ingredients on page load, but what I want to achieve is that on clicking (link or button, I don't mind which), replace the contents of one of the divs (#description) with a list of the ingredients accompanied by its image, the location of which is stored in the image attribute. I have looked at some tutorials which suggest using jQuery to achieve this but I haven't had much luck in getting this to work. I know I could also use the XMLHttpRequest function in JS but not sure which method is better. Any advice would be greatly appreciated!Thanks,Andy