How can I change this jQuery XML parser?

Question

I have this news analyzer. I need to add images here. Hyperlinks for them will be parsed from XML. How can i update xmlParser? I need an image inside a div to give the correct position for the image via CSS. And the CSS class assigned by div for this image.

I tried to add

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

but it seems like I'm wrong with the syntax. What will the full line with append look like after adding such code?

From the 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 the 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 append () in the script using the img tag. You are just a little mistaken with your quotes "and"

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

is inside. '' This is a string. Good.

Further

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

Here <img src = - looks like javascript code that needs to be interpreted. But this is also a string with HTML. Therefore, you must wrap it in quotation marks.

Here I am marked by bites, bold for a better understanding. All this inside

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

So your code

 $(".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 the extra quotes.

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

coincides with

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