将打印数据排列到一个div中，而不是每个循环一次，

如何解决将打印数据排列到一个div中，而不是每个循环一次，

希望大家能帮到我，我一直在玩叫做punk api的brewdogs API。
我已经构建了搜索功能，但是只要用户搜索返回多个啤酒的单词，它就会一次将它们全部打印出来。
是否已经打印了一个标题，一个标语，一个描述，一个摘要，一张图片，然后重复直到所有内容都打印了？
目前，它只是在一个div中打印每个标题，然后在一个div中打印每个标记行，依此类推。
我还附上了DateTimeFormatter#ofPattern

image to show the results when searched.

resource "aws_iam_role_policy_attachment" "ecs-task-permissions" {
    role       = aws_iam_role.test_role.name
    policy_arn = "arn:aws:iam::aws:policy/service-role/AmazonECSTaskExecutionRolePolicy"
}


resource "aws_iam_role_policy" "ecr-access" {

  name = "ecs-access"
  
  role = aws_iam_role.test_role.name

  policy = <<EOF
{
    "Version": "2012-10-17","Statement": [
        {
            "Sid": "2","Effect": "Allow","Action": [
                "ecr:BatchGetImage","ecr:GetAuthorizationToken","ecr:GetDownloadUrlForLayer"
            ],"Resource": "*"
        }
    ]
}
EOF

}

解决方法

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

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

相反，您应该在数据响应中使用与searchBeer一样多的beer。一种流行的技术是使用模板，例如可重用的HTML组件。有一些包装。这是一个基本的可重用组件，假设您有一个搜索结果div，并且在HTML主体的底部是该组件（做同样事情的HTML组元素）：

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

然后在底部：

<div class="beer-component" style="display:none;" >
  <div class="beer-title" ></div>
  <div class="beer-tagline" ></div>
  <div class="beer-abv" ></div>
  <div class="beer-description" ></div>
  <div class="beer-image" ><img alt="beer" /></div>
</div>

现在，您需要多次克隆组件，向它们添加值，并将每个组件附加到搜索结果容器中。

编辑--------------

提交新搜索时，功能代码将再次被解释。因此，如果您不能很好地清除搜索结果容器，由于+=，titleBeer.innerHTML += theBeer，您的标题将不断增加。您需要摆脱它，然后直接将数据放入titleBeer.innerHTML = theBeer。现在可能发生的原因（因为我不知道您的函数clear()的作用）是在选择组件模板时：

const beerComponent = document.getElementsByClassName("beer-component")[0];

在清除结果容器之前，DOM返回驻留在搜索结果容器中的第一个啤酒成分，而不是返回底部以获取模板。第一个组件已经有数据，因此可以做：

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);
      })

    })
}

对于其他情况，您将使用CSS格式化组件以适合您的设计，或者只使用可使用CSS的模板中的现有组件HTML代码。