Javascript 数组将数据打印到一个div中，而不是循环每个div，

希望你们能帮助我，我一直在玩一种叫做朋克api的brewdogs api。
我已经建立了一个搜索功能，但是每当用户搜索一个返回多瓶啤酒的单词时，它会一次打印所有啤酒。
是否需要打印一个标题、一个标语、一个描述、一个abv、一张图片，然后重复打印，直到全部打印完毕？
目前，它只是在一个div中打印每个标题，然后在一个div中打印每个标记行，以此类推。
我还附上了一份

函数beerAsk（e）{
清除（）；
const beerage=document.getElementById（“BeerInputSearch”）.value；
const url=api+beerage；
e、 预防默认值（）
获取（url）
.然后（回复=>{
return reponse.json（）
})
。然后（数据=>{
data.forEach（（啤酒）=>{
const theId=beer.id；
const theBeer=beer.name；
const theTagline=beer.tagline；
const theDescription=beer.description；
const theAbv=beer.abv；
const thePic=beer.image\u url；
const nopic=document.getElementById（'imageSearch'）。src=”https://images.punkapi.com/v2/keg.png"
函数imgDisplay（）{
如果（pIC==null）{
返回nopic；
}否则{
归还照片；
}
}
//我猜这是需要工作的地方
searchBeer.innerHTML+=啤酒
searchBeerTagline.innerHTML+=标签线
searchBeerAbv.innerHTML+=“ABV:+theAbv+”%
searchBeerDescription.innerHTML+=描述
document.getElementById（'imageSearch'）.src=imgDisplay（）；
})
})
}

在您的代码中，您要求将所有标题放在同一个div中：

// this is the bit that needs the work im guessing
searchBeer.innerHTML += theBeer
searchBeerTagline.innerHTML += theTagline
searchBeerAbv.innerHTML += "ABV: " + theAbv + "%"
searchBeerDescription.innerHTML += theDescription

相反，您应该在数据响应中使用与

beer

一样多的

searchBeer

。一种流行的技术是使用模板，比如可重用的HTML组件。有一些包装。这是一个基本的可重用组件，假设您有一个搜索结果div，在HTML正文的底部有一个组件（做同样事情的HTML元素组）：

<div id="search-result" ></div>

在清除结果容器之前，DOM将返回驻留在搜索结果容器中的第一个啤酒组件，而不是从底部取而代之地获取模板。第一个组件已经有数据，因此，执行以下操作：

标题不断加在一起，这是错误的，应该是：

因此，您可以在重新选择模板组件之前清除搜索结果。以下是本例中的最终代码：

---

对于其余部分，您可以使用CSS格式化组件以适合您的设计，或者只使用CSS就绪模板中的现有组件HTML代码。

在您的代码中，您要求将所有标题放在同一个div中：

// this is the bit that needs the work im guessing
searchBeer.innerHTML += theBeer
searchBeerTagline.innerHTML += theTagline
searchBeerAbv.innerHTML += "ABV: " + theAbv + "%"
searchBeerDescription.innerHTML += theDescription

相反，您应该在数据响应中使用与

beer

一样多的

searchBeer

。一种流行的技术是使用模板，比如可重用的HTML组件。有一些包装。这是一个基本的可重用组件，假设您有一个搜索结果div，在HTML正文的底部有一个组件（做同样事情的HTML元素组）：

<div id="search-result" ></div>

在清除结果容器之前，DOM将返回驻留在搜索结果容器中的第一个啤酒组件，而不是从底部取而代之地获取模板。第一个组件已经有数据，因此，执行以下操作：

标题不断加在一起，这是错误的，应该是：

因此，您可以在重新选择模板组件之前清除搜索结果。以下是本例中的最终代码：

---

对于其余部分，您可以使用CSS格式化组件以适合您的设计，或者只使用CSS就绪模板中的现有组件HTML代码。

您应该为每个啤酒创建一个div。。。这样，您将在同一分区添加所有啤酒信息。。。您可以动态创建它们。。。看看这个链接，祝你好运。您是如何选择

searchBeer

元素的？我现在知道您的代码有什么问题了。但是你想让每一个标题和标签行在一个单独的特殊格式的div中吗？你应该为每一个啤酒创建一个div。。。这样，您将在同一分区添加所有啤酒信息。。。您可以动态创建它们。。。看看这个链接，祝你好运。您是如何选择

searchBeer

元素的？我现在知道您的代码有什么问题了。但是你想把每一个标题和标签行放在一个单独的特殊格式的div中吗？这很好，我已经把它标记为答案了。还有一件事，每一个新的搜索都不能摆脱旧的搜索？我猜我需要创建一个某种类型的清除函数，清除输入搜索和div？新的搜索只在上一次搜索的下方，并一直编译一个大列表，直到刷新。在新搜索中添加符合项之前，在foreach循环之前，您应该清除结果容器的内部html，如

resultContainer.innerHTML=“”空字符串。同样，这解决了一个问题，但创建了另一个问题，第一次搜索现在清除，当第二次搜索完成时，结果已更改，但信息重复，因此它将显示第一次搜索的第一瓶啤酒以及第二瓶啤酒，我已更新了我的原始帖子，以向您展示我的意思。如果有任何帮助，我们将不胜感激。我相信常量和html一样都需要清除？我将把代码放在我的编辑器中，使用现有的API来模拟您的用例，并让您知道一种更好的清除新搜索的方法，这种方法非常有效。我已将其标记为答案。还有一件事，每一个新的搜索都不能摆脱旧的搜索？我猜我需要创建一个某种类型的清除函数，清除输入搜索和div？新的搜索只是在上一次搜索的下面，并一直编译一个大的列表，直到您刷新为止。在新的搜索中添加内容之前，您应该清除结果容器的内部html
titleBeer.innerHTML += theBeer

titleBeer.innerHTML = theBeer

function beerAsk(e) {
  // clear(); NOT SURE WHAT IT DOES, BUT I CLEAR it below
  // new elements here
  const resultContainer = document.getElementById("search-result");
  // EDIT --- CLEAR Container first
  resultContainer.innerHTML = "";

  const beerComponent = document.getElementsByClassName("beer-component")[0];
  
  const beerage = document.getElementById("BeerInputSearch").value;
  const url = api + beerage;
  e.preventDefault()
  fetch(url)
    .then(reponse => {
      return reponse.json()

    })
    .then(data => {

      data.forEach((beer) => {
        const theId = beer.id;
        const theBeer = beer.name;
        const theTagline = beer.tagline;
        const theDescription = beer.description;
        const theAbv = beer.abv;
        const thePic = beer.image_url;

        const nopic = document.getElementById('imageSearch').src = "https://images.punkapi.com/v2/keg.png"

        function imgDisplay() {
          if (thePic === null) {
            return nopic;
          } else {
            return thePic;
          }
        }
        // this is the bit that needs the work im guessing
        // CHANGES HAPPEN HERE
        // Create a copy to be different DOM object from the original
        let component = beerComponent.cloneNode(true);

        let titleBeer = component.getElementsByClassName('beer-title')[0];
        let taglineBeer = component.getElementsByClassName('beer-tagline')[0];
        let abvBeer = component.getElementsByClassName('beer-abv')[0];
        let descriptionBeer = component.getElementsByClassName('beer-description')[0];
        let imgBeer = component.querySelector('.beer-image img'); // return one element

        component.style = "display: block;";
        // EDIT ---- change the += to =
        titleBeer.innerHTML = theBeer
        taglineBeer.innerHTML = theTagline
        abvBeer.innerHTML = "ABV: " + theAbv + "%"
        descriptionBeer.innerHTML += theDescription
        imgBeer.src = imgDisplay();
        imgBeer.alt = theBeer;
        
        // Now append the component in Search Result container
        resultContainer.appendNode(component);
      })

    })
}