Кнопка не отображается при использовании JS для динамического добавления на страницу

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i class = "fa fa-archive" aria-hidden = "true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}

<div class = "actions">
  <span class = "action"><i class = "fa fa-reply" aria-hidden = "true"></i></span>
</div>
<div class = "header">
  <span class = "from">${email.sender}</span>
  <span class = "date">
                            <span class = "float-right"></span>${email.timestamp}</span>
</div>
<div class = "title">${email.subject}</div>
<div class = "description">${email.body}</div>

Я создаю gmail как одностраничное приложение, я хочу динамически создать кнопку архива, используя ванильный javascript (кнопка не отображается на моем экране), и я хочу слушать, когда пользователь нажимает кнопку архива, используя прослушиватели событий, затем проверьте если архив равен true, используйте PUT и измените его на false и наоборот.

У меня проблема в том, что моя кнопка не отображается.

Я не знаю, почему, потому что я проверил аналогичные примеры того, как создавать и добавлять кнопки, и был предпринят аналогичный процесс. Пожалуйста, помогите с обзором кода.

                        <div class = "actions">
                            <span class = "action"><i class = "fa fa-reply" aria-hidden = "true"></i></span>
                        </div>
                        <div class = "header">
                            <span class = "from">${email.sender}</span>
                            <span class = "date">
                            <span class = "float-right"></span>${email.timestamp}</span>
                        </div>
                        <div class = "title">${email.subject}</div>
                        <div class = "description">${email.body}</div>

function addElements(mailbox) {
      if (mailbox != 'sent'){
        let actionDivArchiveBtn = document.querySelector('#actions')
        let archiveButton = document.createElement("button");
        archiveButton.classList.add('archive');
        archiveButton.innerHTML = `<i class = "fa fa-archive" aria-hidden = "true"></i>`
        actionDivArchiveBtn.appendChild(archiveButton);

        archiveButton.addEventListener('click',() => {
          if (email.archived === false) {

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i class = "fa fa-archive" aria-hidden = "true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}
<div class = "actions">
  <span class = "action"><i class = "fa fa-reply" aria-hidden = "true"></i></span>
</div>
<div class = "header">
  <span class = "from">${email.sender}</span>
  <span class = "date">
                            <span class = "float-right"></span>${email.timestamp}</span>
</div>
<div class = "title">${email.subject}</div>
<div class = "description">${email.body}</div>
function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `<i class = "fa fa-archive" aria-hidden = "true"></i>`
    actionDivArchiveBtn.appendChild(archiveButton);

    archiveButton.addEventListener('click', () => {
      if (email.archived === false) {
        actionDivArchiveBtn.style.color = "blue";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: true
          })
        })
      } else {
        actionDivArchiveBtn.style.color = "black";
        fetch(`/emails/archive/${id}`, {
          method: 'PUT',
          body: JSON.stringify({
            archived: false
          })
        })
      }
    })
  }
  load_mailbox('inbox');
}
<div class = "actions">
  <span class = "action"><i class = "fa fa-reply" aria-hidden = "true"></i></span>
</div>
<div class = "header">
  <span class = "from">${email.sender}</span>
  <span class = "date">
                            <span class = "float-right"></span>${email.timestamp}</span>
</div>
<div class = "title">${email.subject}</div>
<div class = "description">${email.body}</div>