Javascript Toast函数找不到其dis

你好，我遇到了这个错误，当我登录时， cogo toast alert 没有显示在页面上，但当我注销时，它会显示在页面上，知道为什么它会这样做吗？我try 了多种操作，例如记录toastLiveExample和toastBody，但当我登录showToast("text-bg-success", ${username}, you have successfully signed in! Check out your <a href="/profile/${username}">profile</a>!);时它总是返回空

类型错误:无法读取空的属性(正在读取"classList ') 在showToast(toast.js:6:20) 在HTMLDocument.(登录？id=.)

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" re
  <div id="alert"></div>

   
  <!--bootstrap code-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
  <!--alert code-->
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <script>
    $("#alert").load("/staticHtml/toast.html");
  </script>
  <!-- toast function -->
  <script src="/js/toast.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      try {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const token = urlParams.get("token");

        if (token) {
          const id = urlParams.get("id");
          const username = urlParams.get("username");

          let params = {
            _id: id,
            username,
            token,
          };

          showToast("text-bg-success", `${username}, you have successfully signed in! Check out your <a href="/profile/${username}">profile</a>!`);
          localStorage.setItem("user", JSON.stringify(params));
        }
      } catch (err) {
        console.log(err)
        showToast("text-bg-danger", "Something went wrong");
      }
    });
  </script>

function showToast(toastType, message) {
  const toastLiveExample = document.getElementById("liveToast");
  const toastBody = document.getElementById("toastBody");
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);

  toastLiveExample.classList.add(toastType);
  toastBody.innerHTML = message;
  toastBootstrap.show();
}

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body" id="toastBody">Hello, world! This is a toast message.</div>
      <i class="fa fa-times me-2 m-auto" data-bs-dismiss="toast" aria-hidden="true"></i>
    </div>
  </div>
</div>