How can I modify this jQuery XML parser?

Question

I have this news parser. I need to add images here. Hyperlinks for them will be parsed from XML. How can I upgrade my xmlParser? I need image inside div to give correct position for image via CSS. And CSS class assigned to div for this image.

I have tried to add

<div class="articleimg">' + <img src='"+$(this).find("image").text()+"'/> + '</div>

but it seems that I'm incorrect with syntax. How will the full line with append look after adding such code?

From head:

function xmlParser(xml) {

$('#load').fadeOut();

$(xml).find("item").each(function () {

    $(".main").append('<div class="article"><div class="title">' + $(this).find("title").text() + '</div><div class="full">' + $(this).find("description").html() + '</div><div class="date">Добавлена: ' + $(this).find("pubDate").text() + '</div></div>');
    $(".article").fadeIn(500);
});}

From body:

<div class="main">
<div id="loader" class="loader"><img src="../images/theme/loader.gif" alt="loader" id="load" width="64" height="64" style="vertical-align:middle;"/></div>
</div>

From xml file:

<?xml version="1.0" encoding="utf-8" ?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<item>
<title>Title</title>
<description>Description</description>
<image>http://website.com/images/news/news.png</image>
<pubDate>2018/03/10 00:00:00 GMT+3</pubDate>
</item>
</channel>
</rss>

Answer 1

Yes, you must update you append() in script with img tag. You just a little mistaken with your quotes ' and "

'<div class="article"><div class="title">'

is inside ''. It's a string. It's Ok.

Next

+<img src='"+$(this).find("image").text()+"'/> -

Here <img src= - looks like javascript code wich need to interpret. But it's also string with HTML. So you must wrap it in quotes.

Here are I marked stings as bold for better understanding. It's all inside '

+'<img src="'+$(this).find("image").text()+'"/>'

So your code is

$(".main").append('<div class="article"><div class="articleimg"><img src="'+$(this).find("image").text()+'"/></div><div class="title">' + $(this).find("title").text() + '</div><div class="full">' + $(this).find("description").html() + '</div><div class="date">Добавлена: ' + $(this).find("pubDate").text() + '</div></div>');

---

I removed excess quotes.

'<div>'+'<img'+ variable +'>'+'</div>'

is same as

'<div><img'+ variable +'><div>'