Display Css Grid With Javascript & Dom

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

Solution 1:

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

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

functionrenderResult(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 H5conststring = (`${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);
}