Parsing data from XML and display it on HTML

Question

Currently I have this:

Notice the two boxes displayed are hard coded in, start from line 18 to line 70 in my HTML section. Now that I have a .XML file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<collection>
 <beanRepresentation>
 <beanRepId>222</beanRepId>
 <beanRepName>Bean 1</beanRepName>
 <topY>0</topY>
 <leftX>0</leftX>
 <height>0</height>
 <width>0</width>
 </beanRepresentation>

 <beanRepresentation>
 <beanRepId>223</beanRepId>
 <beanRepName>Bean 2</beanRepName>
 <topY>0</topY>
 <leftX>0</leftX>
 <height>0</height>
 <width>0</width>
</beanRepresentation>

</collection>

I want to be able to parse this information and then display the boxes based on this .XML file, what should I use? jQuery? or just plain Javascript? Can someone help me with the example I posted here.

the topY is the top , and leftX is left for the HTML field respectively. beanRepName should be the name displayed on the box, beanRepId is the integer in jsPlumb.draggable(id) in my Jacascript file. So the four fields I need are topY, leftX, and beanRepId, and beanRepName.

Answer 1

as you already use jsPlumb you can use jQuery.parseXML() to parse the xml data in a searchable structure, iterate over it via $.each and create and insert new elements into the html page eg via

$('<div>')
.css({
    top:$currentxmlnode.find('topY').value()+'px'},
    ...
})
.appendTo(...);

Check the manual to learn how to retrieve the values from xml tree and this to learn how to create new nodes