使用Javascript&显示CSS GRID DOM [英] Display CSS GRID with Javascript & DOM

问题描述

我正在尝试使用我的Firebase Firestore中的数据创建许多DOM项，但是在运行时，第34行出现错误。我不确定我应该将resultGrid附加到什么内容上，以实现我的目标

I am trying to create a number of DOM item's using data from my firebase Firestore, however upon running, I have an error in line 34. I am just not quite sure what I should append resultGrid to, to achieve what I am looking for.

  <div class="w-layout-grid grid">
    <div class="result div-block">
      <div class="data-image"></div>
      <div class="result-footer">
        <div class="results-text">
          <h5 class="data-text">Taffy, 8 | Arabian</h5>
          <h5 class="data-text">$12,000</h5>

这是我当前的javascript。

This is my current javascript.

const resultList = document.querySelector('#horseList') 

function renderResult(doc){
    var resultGrid = document.createElement('div');
    resultGrid.className = ('w-layout-grid grid');

    var resultDiv = document.createElement('div');
    resultDiv.className = ('result');

    var resultImage = document.createElement('div');
    resultImage.className = ('data-image');

    var resultFooter = document.createElement('div');
    resultFooter.className = ('result-footer');

    var resultText = document.createElement('div');
    resultText.className = ('results-text');

    var resultButton = document.createElement('button');
    resultButton.className = ('button tiny w-button');
    resultButton.innerHTML = "View";

    //Render text from database inside H5
    const string = (`${doc.data().name}, ${doc.data().age} | ${doc.data().type}`);
    let resultOne = document.createElement('h5');
    let price = document.createElement('h5');
    resultOne.className = ('data-text');
    price.className = ('data-text');
    price.textContent = (`$${doc.data().price}`);
    resultOne.textContent = string;

    resultList.appendChild(resultGrid);
        resultGrid.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(resultOne);
                    resultText.appendChild(price);
}

//connect to database & get data
const db = firebase.firestore();
db.collection("Horses").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        renderResult(doc);
    });
})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});

谢谢！

推荐答案

我知道了！我最终用HTML静态制作了div GRID，然后只是设置了javascript以在该网格中创建动态div！

I figured it out! I ended up making the div GRID statically in HTML then I just set javascript to create the dynamic div's within that grid!

HTML

<div id="horseList" class="w-layout-grid grid"></div>

Javascript

Javascript

const resultList = document.querySelector('#horseList') 

function renderResult(doc){
    var resultDiv = document.createElement('div');
    resultDiv.className = ('result');
    resultDiv.setAttribute('data-id', doc.id);

    var resultImage = document.createElement('div');
    resultImage.className = ('data-image');

    var resultFooter = document.createElement('div');
    resultFooter.className = ('result-footer');

    var resultText = document.createElement('div');
    resultText.className = ('results-text');

    var resultButton = document.createElement('button');
    resultButton.className = ('button tiny w-button');
    resultButton.innerHTML = "View";

    //Render text from database inside H5
    const string = (`${doc.data().name}, ${doc.data().age} | ${doc.data().type}`);
    let resultOne = document.createElement('h5');
    let price = document.createElement('h5');
    resultOne.className = ('data-text');
    price.className = ('data-text');
    price.textContent = (`$${doc.data().price}`);
    resultOne.textContent = string;

        resultList.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(resultOne);
                    resultText.appendChild(price);
}

这篇关于使用Javascript&显示CSS GRID DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！