JQuery AJAX XML in the same structure

Question

I am new to using XML and testing it for a project (we cannot use JSON, we already have XML to be used).

My problem is that I want to add data from XML to the same structure as on it.

<?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/xsl" href="../xsl/html.xsl" ?> <htmldoc> <heading> Odyssey Heading HTML Test in XML. </heading> <para> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </para> <data>GBF79759</data> <para> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </para> </htmldoc> 

This is a simple example (although existing XML is much more complicated) of some XML markup, I used this as an example because I have a mix of markup that is shared ( <para> & <data> is the main example here).

Where I look online, everyone added the data in a non-dynamic way, selecting elements and adding them, what I want to do is to indicate that each tag is in the XML document as an HTML element, and then it adds everything. I also wonder if this does not cover XSL? Since I do not have much knowledge in XML / XSL, so any help would be greatly appreciated.

Here is an example of my current JS test (non-dynamic path):

 $.ajax({ url: 'xml/' + data + '.xml', type: 'GET', dataType: 'xml' }).done(function(xml) { console.log("success"); $(xml).find('htmldoc').each(function() { var heading = $(this).find('heading').text(), para = $(this).find('para').text(); $('#main > .content-wrapper > .container').append( // XML Structure $('<h3>' + heading + '</h3>'), $('<p>' + para + '</p>') ); }); }).fail(function(jqXHR, textStatus, errorThrown) { console.log("error", jqXHR, textStatus, errorThrown); }).always(function() { console.log("complete"); }); 

Answer 1

 $( $.parseXML( xml ) ).find('htmldoc').each(function() { var heading = $(this).find('heading').text(), para = $(this).find('para').text(); $('#main > .content-wrapper > .container').append( // XML Structure $('<h3>'+heading+'</h3>'), $('<p>'+para+'</p>') ); }); 

Fiddle