How to load images with jQuery and Ajax?

Question:

Hello good afternoon I have this code but I know how to make the div update with its ID example this div is to see the data of the .php file

 <div id="album_paint_content"></div>

and these images in ID have the post that I want to see

album_content ID

<img id="album_content1" class="img_thumbnails" src="imagen"/>
<img id="album_content2" class="img_thumbnails" src="imagen"/>
<img id="album_content3" class="img_thumbnails" src="imagen"/>
<img id="album_content4" class="img_thumbnails" src="imagen"/>

here is the js to do that but I don't know how to do that from an ID because only the first one is updated but the others are not

$(document).ready(function(){   
            $('#album_content').click(function(){
                $("#album_paint_content").load("paint_new.php");
            });
        }); 

well I hope you help me and thank you

Answer:

You can do it like this:

$( "#album_paint_content" ).load( "paint_new.php .img_thumbnails") ...

that way you get only those elements whose class is img_thumbnails .

If you want all the content on the page, remove that and that's it.

Here an example, implementing error handling.

We will get the elements whose class is title on this MDN page.

$(function()  //document.ready es  obsoleto a partir de jQuery 3
{
  $('#album_content').click(function() 
  {
      var url_elem="https://developer.mozilla.org/en-US/docs/Web/HTML .title";
     
      $("#album_paint_content").load(url_elem, function(response, status, xhr) 
      {
          if (status == "error") {
            var msg = "Hubo un error: ";
            console.log(msg + xhr.status + " " + xhr.statusText);
       }
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="album_content">Cargar contenido...</button>
<hr />
<div id="album_paint_content"></div>