working on an emoji app where users can put in an emoji in an input and add to the end of my current emoji sitting in the DOM .

Once my emoji has been pushed into the array of the hardcoded emoji's, the current emoji on display is meant to be cleared to make way for rendering the new arrays in being sent over.

This is where I am stocked.

Here is my code

let emojiIcons = document.getElementById("emoji-disp-cont")
let emoji = ["👨🏾‍💻", " 🐄", " 💽"]

function render() {
  for (let i = 0; i < emoji.length; i += 1) {
    emojiIcons.textContent += emoji[i]
  }
}
render()
let addfrbtn = document.getElementById("addfr-btn")
addfrbtn.addEventListener("click", function() {
  let inputbox = document.getElementById("input-box")
  if (inputbox.value) {
    emoji.push(inputbox.value)
    inputbox.value = ""
    emojiIcons.textContent = ""
    render()
    console.log(emoji)
  }
})