Estoy creando una aplicación de chat usando php, mysql y javascript y quiero actualizar los datos en tiempo real desde json pero los datos completos se imprimen a intervalos por debajo de los datos antiguos. Código JavaScript:

 // fetch chat setInterval(() => { fetch("http://localhost/diaryface/config/chat.php").then(response => response.json()).then(data => { // selfmassage if (sessionuserid == urlid) { const selfmessages = data.filter(item => item.sendbyid == sessionuserid && item.receivebyid == sessionuserid) for (let i = 0; i < selfmessages.length; i++) { const element = selfmessages[i] const messageitem = document.createElement('li') messageitem.classList.add('clearfix') messageitem.innerHTML = `<div class="message my-message float-right">` + element.message + `</div>` messagesarea.appendChild(messageitem) } } // other message else { const messages = data.filter(item => item.sendbyid == urlid || item.receivebyid == urlid) for (let i = 0; i < messages.length; i++) { const element = messages[i] const messageitem = document.createElement('li') messageitem.classList.add('clearfix') if (element.sendbyid == sessionuserid) { messageitem.innerHTML = `<div class="message my-message float-right">` + element.message + `</div>` } else { messageitem.innerHTML = `<div class="message other-message float-left">` + element.message + `</div>` } messagesarea.appendChild(messageitem) } } }) }, 1000)