Convert XML to HTML using jquery/javascript -

i've xml need show in div text.
can convert xml format below.

<root> <field>   <label>have invested before</label>   <value>no</value> </field> <field>   <label>are looking invest in next 6 months</label>   <value>maybe</value> </field> <field>   <label>what investments interested in</label>   <value>carbon credits, green investments</value> </field> <field>   <label>how looking invest</label>   <value>£50,000 -  £100,000</value> </field> </root> 

output should below:

have invested before : no
looking invest in next 6 months : maybe
investments interested in : carbon credits,green investments
how looking invest : £50,000 - £100,000

is possible using jquery/javascript.??

and should rendering below html.

<div class="how-to"> <div class="how-text">     <h3>your requirements</h3>         <ul class="requirements">          <li><label class="field-l">have invested before:</label> <span>no</span></li>          <li><label class="field-l">are looking invest in next 6 months: </label>      <span>maybe</span></li>          <li><label class="field-l">what investments interested in:</label>  <span>carbon  credits,green investments</span></li>  <li><label class="field-l">how looking invest:</label>   <span>£50,000 -  £100,000</span></li>       <li class="link-pad"><a href="index.html" class="requirements">      change  requirements</a></li>     </ul> <div class="clear"></div>  </div>   </div> 

step 1: validate xml

your xml not valid. can check it's valid or not, example, in online validator. there lots of them, 1 linked example.

for answer suposse have xml follows

<root>   <field>       <label>have invested before</label>       <value>no</value>   </field>   <field>       <label>are looking invest in next 6 months</label>       <value>maybe</value>   </field>   <field>       <label>what investments interested in</label>       <value>carbon credits, green investments</value>   </field>   <field>       <label>how looking invest</label>       <value>£50,000 -  £100,000</value>   </field> </root> 

step2: xml, maybe through ajax

i suposse obvious include here anyway.

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

step 3: parse xml

you can use jquery's $.parsexml parse , convert raw data xml document

$.get('/url_of_the_xml_resource')   .done(function(data){     // parse xml     data = $.parsexml(data);     //     // want parsed data   })   .fail(function(){     alert('something went wrong!');   }) ; 

step 4: play data

now have xml document play with. following snipnet assumes have definition list, <dl> tag, in our html layout, , supossed executed after data parsed, in previous step.

// first query html document list element // , store later use var list = $('dl'); // data xml document now, query it... $(data)   // , search <field> elements   .find('field')   // can play each <field>   .each(function(index, element){     // example query & store field     var field = $(element)     // values want     var label = field.find('label').text()     var value = field.find('value').text()     // , append html in <dl> element stored     list       .append('<dt>'+label+': </dt>')       .append('<dd>'+value+'</dd>')     ;   }) ; 

conclusion

jquery want use. it's chainable nature makes transversing dom cutting butter. hope answer useful you.

as aditional reference, see full example on jsfiddle