### 前提・実現したいこと firestoreから取得したデータをhtmlのテーブルに表示したいです。 ### 発生している問題・エラーメッセージ ``` 取得した一覧を表示することはできるのですが、列を分けて項目ごとに表示することができません。 ``` ### 該当のソースコード ```ここに言語名を入力 JavaScript 　　　　　firebase.auth().onAuthStateChanged(function(user) { userName = user.displayName; userId = user.uid; 　　　　　let inOutTime = document.querySelector('#inOutName'); 　function renderTime(doc){ let li = document.createElement('li'); let name = document.createElement('span'); let intime = document.createElement('span'); let outtime = document.createElement('span'); let datetoday = document.createElement('span'); li.setAttribute('data-id', doc.id); name.textContent = doc.data().name; intime.textContent = doc.data().intime; outtime.textContent = doc.data().outTime; datetoday.textContent = doc.data().outTimeValue; li.appendChild(name); li.appendChild(datetoday); li.appendChild(intime); li.appendChild(outtime); inOutTime.appendChild(li); } 　　　　　database.collection(userId).get().then((snapshot) => { snapshot.docs.forEach(doc => { renderTime(doc); }) }) html

名前	出勤時間	退勤時間

このコードだと一覧を表示することができますが、列を分けられません。 ``` ### 試したこと JavaScript let inTime = document.querySelector('#intime'); function renderTime(doc){ let list = document.createElement('li'); let intime = document.createElement('span'); list.setAttribute('data-id-in', doc.id); intime.textContent = doc.data().intime; list.appendChild(intime); inTime.appendChild(list); } let inOutTime = document.querySelector('#inOutName'); function renderTime(doc){ let li = document.createElement('li'); let name = document.createElement('span'); li.setAttribute('data-id', doc.id); name.textContent = doc.data().name; li.appendChild(name); inOutTime.appendChild(li); } 上記のように項目を分けてみたのですが、そうすると後に書いたものしか表示されません。動画を見ながら書いたのですがオリジナルも含まれているので滅茶苦茶な書き方だったら申し訳ありません。どなたか意図を汲んでいただける方ご教授をお願いします。

質問編集履歴