Convert XML image path to image using jQuery

Question

I am trying to convert the image path to the actual image when I read it in an XML file on my website. The structure of my XML is:

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

This is how I read in XML on my page:

$("#container").append($(xmlDoc).find('person[id="1"]').text() + '<br/>')

The above line of code currently reads all information for a person and displays in text format, for example:

Alice Ruby images / ruby.jpg

What I would like to do is convert the image path to a real image, searching the Internet I could write this code:

<img src"images/' +$(this).find("image").text() + '"alt=$(this).find('person[id="1"]').text()>);

I’m not sure how I can combine them, I’m pretty new and try to play with him, but I couldn’t do it with every attempt - any help would be appreciated, let me know if I was not clear enough.

EDITED: I wrote this:

$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoc).find("image").text() + alt="' + $(xmlDoc).find('person[id="1"]').text())

, , ,

Uncaught ReferenceError: Invalid left-hand side in assignment

Answer 1

<img> .append().

$.ajax({
	type: "GET",
	url: "./peopleNetwork.xml",
	datatype: "xml",
	success: function(xml){
		var xmlDoc = $.parseXML(xml),
		$xml = $(xmlDoc);
		$xml.find("person").each(function(){
			var image = $(this).children("image").text();
			$("#container").append($(this).children("name").text() + " " + $(this).children("friend").text() + " " + '<img src="./' + image + '">' + "<br />");
		});
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

Hide result