javascript - 如何从 Firebase 的 JavaScript 查询创建复选框列表

Question

我正在为医疗专业人员建立一个网站，登录用户可以通过从 Firebase 查询来查看他们的患者列表。我已经设法从 Firebase 检索数据并显示在我的 HTML 页面的 div 中，但仅作为元素符号列表。如何将元素符号列表转换为复选框列表？

HTML:

<h2>Welcome, </h2>
<h3>Please find your patients listed below</h3>

    <div class="container">
            <ul class="patientsList" id="patients-list">
            </ul>
    </div>
    <br/>

    <button class="RiskProfileBtn">View Patients Risk Profile</button><br>
    <button id="RiskReportBtn">Run Risk Report for Patient</button><br><br>

JavaScript:

const patientsList = document.querySelector('#patients-list');

function renderPatientList(doc) {
let li = document.createElement('li');
let name = document.createElement('span');
let Email = document.createElement('span');
let Address = document.createElement('span');
let GPID = document.createElement('span');
let InsuranceCompany = document.createElement('span');

li.setAttribute = ('data-id', doc.id);

name.textContent = doc.data().name;
Email.textContent = doc.data().email;
Address.textContent = doc.data().Address;
GPID.textContent = doc.data().GPID;
InsuranceCompany.textContent = doc.data().InsuranceCompany;

li.appendChild(name);
li.appendChild(Email);
li.appendChild(Address);
li.appendChild(GPID);
li.appendChild(InsuranceCompany);

patientsList.appendChild(li);

Answer 1

为每个患者，创建一个<li>并在里面追加一个<input>元素使用 appendChild()功能并添加type='checkbox' 属性 <input>元素。