通过 JavaScript 动态添加 HTML 部分会在刷新时复制 HTML 代码

Question

I am trying to resolve a course project of mine and I am having hard time with one of the functionalities. I have a piece that should fetch and display all entries from a Firebase DB but what it does on refresh is to add one more to the DOM (no change in Firebase) instead of simply returning the Firebase results.

 const data = { "-MQufI6df_3HJ6WQtB0u": { "author": "Test", "isbn": "123", "title": "Testing1" }, "-MQufLMu5gGKQlZE0UrN": { "author": "Test", "isbn": "123", "title": "Testing2" }, "-MQufLwiyLP6T3pXHKH5": { "author": "Test", "isbn": "123", "title": "Testing3" } } document.getElementById('loadBooks').addEventListener('click', function() { document.getElementById('booksList').innerHTML = ''; let books = Object.entries(data); for (const book in books) { console.log(book); let currentBook = books[book][1]; let newBook = document.createElement('tr'); newBook.innerHTML = ` <tr> <td>${currentBook.title}</td> <td>${currentBook.author}</td> <td>${currentBook.isbn}</td> <td style="display: none">${books[book][0]}</td> <td> <button>Edit</button> <button>Delete</button> </td> </tr> `; document.getElementById('booksList').appendChild(newBook); } });

 <button id="loadBooks">LOAD ALL BOOKS</button> <table> <thead> <tr> <th>Title</th> <th>Author</th> <th>Isbn</th> <th>Action</th> </tr> </thead> <tbody id="booksList"> </tbody> </table> <form> <h3>FORM</h3> <label>TITLE</label> <input type="title" id="title" placeholder="Title..."> <label>AUTHOR</label> <input type="title" id="author" placeholder="Author..."> <label>ISBN</label> <input type="title" id="isbn" placeholder="Isnb..."> <button id="submit">Submit</button> </form>

Current result: Lets say I have 1 book: Book - John Smith - 1234

After hitting again the 'loadBooks;' btn I see in the browser: Book - John Smith - 1234 Book - John Smith - 1234

Expected result: On refresh I should only see: Book - John Smith - 1234

until I add a second book to my list.

Answer 1

you need to simply add one check before appending child 'newBook' in 'booksList'

var booksList = document.getElementById("booksList");
if(booksList !== null){ // thats means its exists in dom
   document.getElementById('booksList).innerHTML = ''
}