如何通过Session将HTML列表元素改为当前登录用户的用户名（JSP/Servlet）

看来你遇到的问题核心在于目标元素选择偏差和JavaScript执行时机不当，还有个小细节是没处理Session中用户名不存在的情况。我来一步步帮你梳理解决：

问题根源分析 #

你当前的代码是修改<li id="loginbutton">的textContent，但实际上用户看到的是<li>内部<a>标签里的文字——直接修改<li>的文本要么会覆盖掉<a>标签，要么根本不会改变页面显示的内容。另外，如果你的JS代码放在页面头部（<li>元素之前），执行时DOM还没加载完成，document.getElementById("loginbutton")会返回null，自然无法完成修改操作。

方案一：用JavaScript修正（适合需要动态交互的场景） #

1. 调整HTML结构（给内部的<a>标签添加ID） #

<li class="loginbutton">
  <a id="loginLink" href="login.jsp">Log in/Sign up</a>
</li>

2. 确保JS在DOM加载完成后执行 #

// 等待整个DOM树加载完毕再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 从Session获取用户名，同时处理未登录时的空值情况
  var username = '<%= session.getAttribute("username") != null ? session.getAttribute("username") : "Log in/Sign up" %>';
  // 获取目标<a>标签
  var loginLink = document.getElementById('loginLink');
  
  if (loginLink) {
    // 修改<a>标签的显示文本
    loginLink.textContent = username;
    // 可选优化：登录后修改链接指向个人中心页面
    if (username !== "Log in/Sign up") {
      loginLink.href = "profile.jsp"; // 替换成你的个人中心页面路径
    }
  }
});

方案二：直接用JSP服务器端渲染（更简洁可靠） #

其实完全不需要JavaScript，直接在JSP里用EL表达式（表达式语言）就能完成，服务器端渲染不会有DOM加载时机的问题：

<li class="loginbutton">
  <a href="${empty sessionScope.username ? 'login.jsp' : 'profile.jsp'}">
    ${empty sessionScope.username ? 'Log in/Sign up' : sessionScope.username}
  </a>
</li>

这段代码的逻辑很清晰：

• 如果Session中没有username（未登录状态），显示"Log in/Sign up"，链接指向登录页
• 如果Session中有username（已登录状态），显示用户名，链接指向个人中心页面

补充说明：你原来的代码不生效的具体原因 #

1. 元素选择错误：你修改的是<li>的文本，但用户实际看到的是内部<a>标签的内容，所以修改<li>不会改变页面显示效果
2. 执行时机问题：如果JS代码在<li>元素之前加载，此时DOM还没渲染到该元素，getElementById返回null，无法执行修改
3. 未处理空值：如果未登录时session.getAttribute("username")返回null，你的JS变量会变成'null'，显示效果也不符合预期

内容的提问来源于stack exchange，提问作者J.Dan