Javascript 如何在jQuery api调用中生成HTML元素（已解决）_Javascript_Html_Jquery_Api

Javascript 如何在jQuery api调用中生成HTML元素（已解决）

javascript html jquery api

Javascript 如何在jQuery api调用中生成HTML元素（已解决）,javascript,html,jquery,api,Javascript,Html,Jquery,Api,这是我的密码。我能够接收和显示数据。然而，当显示数据时，它全部显示在一个HTML元素中，为了澄清这一点，我在$（“.title”）中得到了9个标题。相反，我希望为每个API响应生成一个title元素 //jQuery var type = $(this).attr("data-type"); var queryURL = "https://api.edamam.com/search?q=mango&app_id=id&app_key=key"

这是我的密码。我能够接收和显示数据。然而，当显示数据时，它全部显示在一个HTML元素中，为了澄清这一点，我在$（“.title”）中得到了9个标题。相反，我希望为每个API响应生成一个title元素

//jQuery
var type = $(this).attr("data-type");
var queryURL = "https://api.edamam.com/search?q=mango&app_id=id&app_key=key";
console.log(queryURL);

// Grabbing API results
$.ajax({
    url: queryURL,
    method: "GET",
  })
    .then (function(response) {
        
        for(let i = 0;i< 9; i++){
        $(".title").append("Recipe: " + response.hits[i].recipe.label);
        $(".img").append("src", response.hits[i].recipe.image);
        $(".ingredients").append(response.hits[i].recipe.ingredientLines);
          
        }
  });

//jQuery
var type=$（this.attr（“数据类型”）；
变量queryURL=”https://api.edamam.com/search?q=mango&app_id=id&app_key=key";
console.log（queryURL）；
//抓取API结果
$.ajax({
url:queryURL，
方法：“获取”，
})
.然后（功能（响应）{
for（设i=0；i<9；i++）{
$（“.title”）.append（“配方：”+response.hits[i].Recipe.label）；
$（“.img”）.append（“src”，response.hits[i].recipe.image）；
$（“.components”）.append（response.hits[i].recipe.Ingreditlines）；
}
});

//HTML
您只是将文本附加到单个元素。您需要创建一个card div，用内容填充它，然后将其附加到
中。创建一个新元素并将其追加如下：const$card=$（''）.addClass（“card body”）.appendTo（“body”）$（''）.addClass（'title'）.text（“配方”+…）.appendTo（$card）等等on@ChrisG这几乎是一个答案：）@Rorymcrossan但我不把这些作为答案发布是错的吗？官方的政策是在回答中重新使用API文档吗？诚实的问题。谢谢你的帮助！我在附加图像时遇到了麻烦。我尝试使用attr和append，但它似乎没有显示任何建议？请将您尝试的代码放入问题中。
//HTML 
<body>
    <div class="card-body">
  <h1 class="title"></h1>
  <img class="img" />
  <p class="ingredients"></p>
</div>
</body>

//inside of function(response)
const $card = $('<div>').addClass("card-body").appendTo('body');
            $('<h1>').addClass('title').text("Recipe " + response.hits[i].recipe.label).appendTo($card);
$('<p>').addClass('ingredients').text("ingredients " + response.hits[i].recipe.ingredientLines).appendTo($card);
 var img = $('<img />').attr({
                    'id': 'myImage',
                    'src': response.hits[i].recipe.image,
                    'width': 250
                }).appendTo($card);