使用 JS 动态添加到页面时按钮不显示

Question

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，我想使用 vanilla javascript 动态创建一个存档按钮（该按钮未显示在我的屏幕上）并且我想在用户点击时收听在存档按钮上使用事件侦听器然后使用 PUT 检查存档是否为真并更改为假，反之亦然。

我遇到的问题是我的按钮没有显示。

我不知道为什么，因为我已经检查了关于如何创建和附加按钮的类似示例，并且采取了类似的过程。请帮助进行代码审查。


                        <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) {

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>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>

Answer 1

您的 querySelector 对应 actionDivArchiveBtn 不正确。因为您按 id 搜索，但在布局中它是 class，所以我将布局 class 更改为 id，现在可以使用了。但可能你需要 class 在布局中然后将 # 更改为 . 在 querySelector:

function load_mailbox(string) {
  console.log(string);
}

function addElements(mailbox) {
  if (mailbox != 'sent') {
    let actionDivArchiveBtn = document.querySelector('#actions')
    let archiveButton = document.createElement("button");
    archiveButton.classList.add('archive');
    archiveButton.innerHTML = `SOME TEXT<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');
}

addElements('receive');

<div id="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>

使用 JS 动态添加到页面时按钮不显示

Button not showing when using JS to dynamically add to page

javascript

fetch-api