Related to XML JQuery HTML

Question

I'm new to JQuery.But, I am trying to do this using it. I have an XML set that looks like the following:

<?xml version="1.0" encoding="utf-8" ?>
<Columns>
  <Column>
    <Id>Col_Id_1</Id>
    <Name>Col_Name_1</Name>
    <Type>int</Type>
  </Column>
  <Column>
    <Id>Col_Id_2</Id>
    <Name>Col_Name_2</Name>
    <Type>string</Type>
  </Column>
  <Column>
    <Id>Col_Id_3</Id>
    <Name>Col_Name_3</Name>
    <Type>DateTime</Type>
  </Column>
</Columns>

Now, what i want to do is this :

<div id="header" class="all_are_H3_from_CSS">
        <label id="Col_Id_1">Col_Name_2</label> |
        <label id="Col_Id_1">Col_Name_3</label> |
        <label id="Col_Id_1">Col_Name_4</label> |
    </div>

I have tried this way :

 <script type="text/javascript" language="javascript">
    $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "GetColumnNames.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('Column').each(function(){
                        var id = $(this).attr('Id');
                        var title = $(this).find('Name').text();
                        $('<div class="items" id="link_'+id+'"></div>').html('<label id='+id+'>'+title+'</label>').appendTo('#page-wrap');
                    });
                }
            });
        });
    </script>

but not getting desired o/p.

how can i do this using jquery. The above XML can be dynamic & is available in string format/can be located at File1.xml

Thank you!

Answer 1

One option would be to use XSLT to transform it to the XML/div form you have, then send that client side using a .load() jQuery call inserting it where you need.