如何在静态网站中重用 html/css/javascript？

Question

我建立了一个网站，以材料设计卡的形式显示基本数据（字符串），这些数据是我从 Firebase Firestore 获得的。您输入一个代码并查看带有代码 ID 的数据。

我的问题： 目前我只能看到一张卡，我想要多一张。仅仅重写相同的代码（使用不同的 id，...）是行不通的，因为我希望用户能够添加任意数量的卡片。

<div class="card"><h4>Data1<h4/><p>Data2<p/><p>Data3<p/></div>

javascript（我没有包含完整的 firebase 代码）

getRealtimeUpdates = function() {
    docRef.onSnapshot(function (doc) {
        if (doc && doc.exists) {
            const myData = doc.data();
         //in here set the text like this example.innerHTML = myData.exampledata;
        }
    });
};

getRealtimeUpdates();

css（代码比较多，不过只是设置了背景、字体、颜色、导航……）

.card {
 position: relative;
top: 60px;
background-color: white;
width: 95%;
margin-left: auto;
margin-right: auto;
}

我尝试使用 iframe 仅显示带有卡片的网站，但这变得很乱，无法在移动设备上正确显示。

我尝试的另一件事是在表格中显示数据，但是当有多个固定行时我不确定如何显示它。

感谢您的帮助！

Answer 1

您可以使用 JS 附加 html。只需添加一个包含所有卡片的包装器。

html:

<div class="cards"></div>

javascript：

const cards = document.querySelector('.cards');

function cardHtml(myData) {
    return `<div class="card"><p>${myData}</p></div>`;
}

getRealtimeUpdates = function() {
    docRef.onSnapshot(function (doc) {
        if (doc && doc.exists) {
            const myData = doc.data();
            cards.insertAdjacentHTML('beforeend', cardHtml(myData));
        }
    });
};

getRealtimeUpdates();