I recently completed a project where I used JavaScript to create an element and fetch data from Firebase Firestore database, then appended it to the HTML body. The structure included a div serving as the container box with object.className, an h4 for the title, and some paragraphs for text. However, none of these elements were visible on the webpage. Surprisingly, when I inspected the element and called console.log(object) for one object, it displayed the desired HTML tag elements. Hovering over them highlighted the exact area I intended, although they remained invisible. Upon examining the HTML document, I realized that the newly added elements from JavaScript were being pushed beneath elements added directly in the HTML. Can someone assist me with this issue? I am new to this field. Thank you.
1.) Part of the HTML Element (The Firebase is properly set up here)
<body>
<div class="big-container">
<div class="title">
<span class="title-text">Kompor</span>
</div>
<nav id="wrapper">
<!-- ONE DIV CALLED "IMPORTANT" is necessary for the last box visible -->
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
...
</div>
2.) JS
//DOMstart
const docTarget = document.querySelector('#wrapper');
function insertDoc(doc){
//creation
let box = document.createElement('div');
...
}
//get doc
var doc;
db.collection('Product').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
insertDoc(doc);
})
})
The CSS is correctly linked and functions well with the HTML document's elements.