尝试遍历引导程序行，使用DOM在每个行中添加3个col-4

Question

因此，我基本上是从Studio Ghibli API中提取数据，并从它获得的信息中输出引导卡中的数据。这部分工作，但我希望他们对齐在3列-md-4的行。

下面是我的for循环：

​

for (let col in row) {
      let newRow = document.createElement("div");
      newRow.setAttribute("class", "row");
      container.appendChild(newRow);
      for (col = 0; col <= 3; col++) {
        newCol[col].appendChild(card.appendChild(cardBody));
        cardBody.appendChild(cardTitle);
        cardBody.appendChild(cardSubtitle);
        cardBody.appendChild(cardText);
      }
    }

​

我基本上得到了一个无尽的循环，创建了数千个“行”，但在/data中没有我的"cols“。对于任何澄清，这里是文件的其余部分：

​

const row = document.querySelector(".row");
const container = document.querySelector(".container");
// const col = document.getElementById("col-md-4");

fetch("https://ghibliapi.herokuapp.com/films")
  .then((res) => res.json())
  .then(function (data) {
    console.log(data);
    displayResults(data);
  })
  .catch((err) => console.log(err));

function displayResults(data) {
  for (results of data) {
    // new col
    let newCol = document.createElement("div");
    newCol.setAttribute("class", "col-md-4");

    // card
    let card = document.createElement("div");
    card.setAttribute("class", "card");
    card.style.width = "18rem";

    // card body
    let cardBody = document.createElement("div");
    cardBody.setAttribute("class", "card-body");

    // card title
    let cardTitle = document.createElement("h5");
    cardTitle.setAttribute("class", "card-title");
    cardTitle.innerHTML = results.title;

    // card subtitle
    let cardSubtitle = document.createElement("h6");
    cardSubtitle.setAttribute("class", "card-subtitle mb-2");
    cardSubtitle.innerHTML = "-" + results.director;

    // card text
    let cardText = document.createElement("p");
    cardText.setAttribute("class", "card-text");
    cardText.innerHTML = results.description;

​

而且HTML相当简单：

​

 <div class="container">
      <div class="row"></div>
    </div>

​

编辑:我省略了所有样板HTML/bootstrap导入代码。

Answer 1

看看这种方法，它使用字符串文字，而不是动态创建元素。

HTML：

<div class="container">
  <div id="card-selector" class="row">
  </div>
</div>

JS：

 const row = document.querySelector(".row");
 const container = document.querySelector(".container");

    fetch("https://ghibliapi.herokuapp.com/films")
      .then((res) => res.json())
      .then(function (data) {
        displayResults(data);
      })
      .catch((err) => console.log(err));

    function displayResults(data) {
      const cardSelector = document.getElementById("card-selector");
      data.forEach((result) => {
        let card = `
                  <div class="card" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title">${result.title}</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>`;

        let containerDiv = document.createElement("div"); //create the col div
        containerDiv.setAttribute("class", "col-sm-6 col-md-4"); //Add the bootstrap col class as needed
        containerDiv.innerHTML = card;
        cardSelector.appendChild(containerDiv);
      });
    }

​

const row = document.querySelector(".row");
 const container = document.querySelector(".container");

    fetch("https://ghibliapi.herokuapp.com/films")
      .then((res) => res.json())
      .then(function (data) {
        displayResults(data);
      })
      .catch((err) => console.log(err));

    function displayResults(data) {
      const cardSelector = document.getElementById("card-selector");
      data.forEach((result) => {
        let card = `
                  <div class="card mb-3">
                    <div class="card-body">
                      <h5 class="card-title">${result.title}</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>`;

        let containerDiv = document.createElement("div"); //create the col div
        containerDiv.setAttribute("class", "col-sm-6 col-md-4"); //Add the bootstrap col class as needed
        containerDiv.innerHTML = card;
        cardSelector.appendChild(containerDiv);
      });
    }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="card-selector" class="row">
  </div>
</div>

​