Convert XML to HTML using jquery/javascript

Step 1: validate your xml

Your xml is not valid. You can check if it's valid or not, for example, in an online validator. There are lots of them, this one I have linked is only an example.

For this answer, let's suppose we have some xml as follows:

<root>
  <field>
      <label>Have you invested before</label>
      <value>No</value>
  </field>
  <field>
      <label>Are you looking to invest in the next 6 months</label>
      <value>Maybe</value>
  </field>
  <field>
      <label>What investments are you interested in</label>
      <value>Carbon Credits, Green Investments</value>
  </field>
  <field>
      <label>How much are you looking to invest</label>
      <value>£50,000 -  £100,000</value>
  </field>
</root>

Step2: get the xml, maybe through ajax

I suppose this is obvious but I will include it here anyway.

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // this function is executed if the request was sucessfull
  })
  .fail(function(){
    // this function is executed if the request fails
  })
;

Step 3: parse the xml

You can use jQuery's $.parseXML to parse it and convert the raw data into a XML document.

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // parse the xml
    data = $.parseXML(data);
    //
    // do anything you want with the parsed data
  })
  .fail(function(){
    alert('something went wrong!');
  })
;

Step 4: play with the data

Now we have a xml document to play with. The following snippet assumes we have a definition list, <dl> tag, in our HTML layout, and is supposed to be executed after the data is parsed, like in the previous step.

// first we query the HTML document to get the list element
// and store it for later use
var list = $('dl');
// data is a xml document now, so we query it...
$(data)
  // and search for all <field> elements
  .find('field')
  // now we can play with each <field>
  .each(function(index, element){
    // as example we query & store the field
    var field = $(element)
    // get the values we want
    var label = field.find('label').text()
    var value = field.find('value').text()
    // and append some html in the <dl> element we stored previously
    list
      .append('<dt>'+label+': </dt>')
      .append('<dd>'+value+'</dd>')
    ;
  })
;

Conclusion

jQuery is what you want to use. Its chainable nature makes transversing the DOM like cutting butter. I hope this answer to be useful for you.

As an additional reference, see the full example on jsfiddle