JSFiddle - React, Tailwind, and code Playground

by Soul_Master

HTML

<div id="divContainer"></div>

CSS

p
{
  border:1px solid #c1c1c1; 
  margin-bottom:10px;  
}
h1
{
    background: #f1f1f1;
    padding:5px;  
}

JavaScript

$(function()
{
    var xml = 
    '<?xml version="1.0" encoding="utf-8"?>' +
    '<collection>' +
        '<item>' +
            '<title>Google Logo</title>' +
            '<photo>http://www.google.com/images/logo.gif</photo>' + 
        '</item>' +
        '<item>' +
            '<title>Bing Logo</title>' +    '<photo>http://www.monavista.com/thumbnail/ico_bing(2).jpg</photo>' + 
        '</item>' +
    '</collection>';
    
    $(xml)
        .find('item')
        .each(function()
         {
             var title = $(this).find('title').text();
             var photo = $(this).find('photo').text();
             
             $('<p/>')
                 .append($('<h1/>').text(title))
                 .append($('<img/>').attr('src', photo))
                 .appendTo($('#divContainer'));
         });
});