我的情况:目前，我有一个表单，它将用户的信息推送到firebase数据库&； 一个实时的听众。

问题是:我试图将JavaScript HTML放置到主Dom上，替换像占位符一样工作的旧HTML模板。

我的问题是:我是否能够用firebase呈现的数据HTML替换模板HTML。 我尝试用name.innerhtml+=html；替换代码，但不起作用。 控制台将抛出一个错误:auth.js:20 uncapted TypeError:无法读取null的属性“inner html”

我使用的代码:

null

const name = document.querySelector('.switch_name');

// Render Name Data
const renderName = (data, id) => {

 const html = `
 <div>
  <a href="#" data-id="${id}">
   <div class="input-field col s12">
    <i class="material-icons prefix">account_circle</i>
    <input type="text" class="validate" value="${data.name}"/>
    <label>Full Name</label>
   </div>
  </a>
 </div> `;

// -----REPLACE HTML----
name.innerHTML += html;

};

// Savng Profile Info To Database
const profileForm = document.querySelector('.profile-form');
const submitBtn = document.querySelector('.submit');

submitBtn.addEventListener('click', (e) => {
e.preventDefault();

 const fullName = profileForm['icon_prefix'].value;

 db.collection('profile').doc().set({
  name: fullName,
 }).then(() => {
  window.location.href = "/pages/profile.html";
  console.log('data saved');
 }).catch(() => {
  console.log(error);
 });
});

// Real-Time Data
db.collection('profile').onSnapshot((snapshot) => {
 snapshot.docChanges().forEach(change => {
  if(change.type === 'added'){
   renderName(change.doc.data(), change.doc.id);
  }
  if(change.type === 'removed'){

  }
 });
});

       <div class="switch_name">
        <a href="/pages/name.html">
         <div class="input-field col s12">
           <i class="material-icons prefix">account_circle</i>
           <input type="text" class="validate"/>
           <label>Full Name</label>
         </div>
        </a>
       </div>

null