title: How to generate HTML elements on jQuery api call (SOLVED)
body: <p>This is my code. I'm able to recive and display the data. However when displaying the data It's all displayed in one HTML-element, to clarify I get 9 titles in my $(&quot;.title&quot;). Instead I would like to generate one title-element foreach API response.</p>
  <pre><code>//jQuery
  var type = $(this).attr(&quot;data-type&quot;);
  var queryURL = &quot;https://api.edamam.com/search?q=mango&amp;app_id=id&amp;app_key=key&quot;;
  console.log(queryURL);
  
  // Grabbing API results
  $.ajax({
      url: queryURL,
      method: &quot;GET&quot;,
    })
      .then (function(response) {
          
          for(let i = 0;i&lt; 9; i++){
          $(&quot;.title&quot;).append(&quot;Recipe: &quot; + response.hits[i].recipe.label);
          $(&quot;.img&quot;).append(&quot;src&quot;, response.hits[i].recipe.image);
          $(&quot;.ingredients&quot;).append(response.hits[i].recipe.ingredientLines);
            
          }
    });
  </code></pre>
  <pre><code>//HTML 
  &lt;body&gt;
      &lt;div class=&quot;card-body&quot;&gt;
    &lt;h1 class=&quot;title&quot;&gt;&lt;/h1&gt;
    &lt;img class=&quot;img&quot; /&gt;
    &lt;p class=&quot;ingredients&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p><strong>Solution</strong> courtesy of @ChrisG.</p>
  <pre><code>//inside of function(response)
  const $card = $('&lt;div&gt;').addClass(&quot;card-body&quot;).appendTo('body');
              $('&lt;h1&gt;').addClass('title').text(&quot;Recipe &quot; + response.hits[i].recipe.label).appendTo($card);
  $('&lt;p&gt;').addClass('ingredients').text(&quot;ingredients &quot; + response.hits[i].recipe.ingredientLines).appendTo($card);
   var img = $('&lt;img /&gt;').attr({
                      'id': 'myImage',
                      'src': response.hits[i].recipe.image,
                      'width': 250
                  }).appendTo($card);
  </code></pre>