How could I insert a line break after each image that loads in from the Flickr API?

Good Morning. I am attempting to insert a line break after each image that loads from the Flickr API. I am not quite sure how to manipulate the style of data that has not yet loaded into the browser.

I have tried to use the
tag within the "images" div in my HTML. I have also tried to manipulate the javascript when calling the Flickr API function.

<body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">


 <div id="images">

      <p>This is where the 25 pictures are loaded. 
      They load horizontally and move to the next 
      line when there is not enough room.
      I would like a line break <br> after each image.</p>

      </div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {

       $("#submit").click(function (event) {

         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE&nojsoncallback=1";
           $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           format: "json"
         },  
           function( data ) {
               $('#images').empty();
           $.each( data.photos.photo, function( i, item ) {
             var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';

            $('#images').append('<img src="' + url + '"/>');
          });

        });
     });    
     });
  </script>
 </body>
</html>

The user clicks "GO!" and 25 pictures load into the "images" div. Each picture is on its own line. Currently, the 25 images load and stack horizontally before the page break
.

Solution

I believe you just want your images to be displayed as a block ? <img> tag default display value is inline-block. You can just give them a class when appending.

$('#images').append('<img class="image" src="' + url + '"/>');


.image {
  display: block;
}

Another way would be to add display: flex to your .images div.


.images {
  display: flex;
  flex-flow: column wrap;
}