Consume XML RSS feed using jquery in a predefined template

I want use rss feed to show images on other website using jQuery

XML RSS structure is like

<rss version="2.0">  
<channel>  
    <title>Gallery</title>  
    <link>http://www.example.com</link>  
    <description>  Latest Photos</description>  

    <item>  
        <title>First Title of Photo</title>                
        <link >https://www.example.com/image/gallery/1.jpg </link>
        <pubDate>Sun, 17 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item>

    <item>  
        <title>Second Title of Photo</title>                
        <link >https://www.example.com/image/gallery/2.jpg </link>
        <pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item>

    <item>  
        <title>Third Title of Photo</title>                
        <link >https://www.example.com/image/gallery/3.jpg </link>
        <pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item> 


</channel>  
</rss>

My HTML page has following HTML structure

<div id="feed">
  <div class="item">
    <img  src="image-path"/>
    <span class="image-title"></span>
  </div>
</div>

How can i change below code to work with the above structure..

$(document).ready(function() {  
    var url = 'http://www.recruiter.com/feed/career.xml'; //Data in XML format  
    $.ajax({  
        type: 'GET',  
        url: "https://api.rss2json.com/v1/api.json?rss_url=" + url, //For converting default format to JSON format  
        dataType: 'jsonp', //for making cross domain call  
        success: function(data) {  
            alert('Success');  
            $("#feed").append(data.feed);  
            console.log(data.feed.description);  
        }  
    });  
});

Solution

You need to loop through data.items and add target data into html. As shown in bottom

$.each(data.items, function(i, item){
  $("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
});

So your code should change to:

var url = 'http://www.recruiter.com/feed/career.xml';
$.ajax({  
  type: 'GET',  
  url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'jsonp',
  success: function(data) {    
    $.each(data.items, function(i, item){
        $("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
    });
  }  
});

Check result in demo