如何在HTML中将输入值（如邮箱）设置为粗体显示？

你当前用innerText设置文本内容，它会把所有内容当成纯文本解析，HTML标签无法生效。要让邮箱地址显示粗体，需要改用innerHTML，并把邮箱用<strong>标签包裹，具体修改如下：

function showPopUp() {
  submitBox.classList.toggle("show");
  // 用<strong>标签包裹邮箱地址
  let successMessage = `A confirmation email has been sent to <strong>${emailInput.value}</strong>. Please open it and click the button inside to confirm your subscription`;
  // 替换innerText为innerHTML，让浏览器解析HTML标签
  document.querySelector(".confirmation-text").innerHTML = successMessage;
}

为啥废弃的.bold()方法没用？ #

.bold()是早期DOM API的方法，它返回一个包含<b>标签的HTML元素，但innerText赋值时会把这个元素的字符串形式（比如[object HTMLElement]）直接显示，不会解析成HTML样式，所以完全起不到加粗效果。只有innerHTML能让浏览器识别并渲染标签样式。

如果你想更灵活地控制样式，也可以用CSS类实现：

1. 先定义CSS类：

.bold-email {
  font-weight: bold;
}

2. 再修改JS代码：

function showPopUp() {
  submitBox.classList.toggle("show");
  let successMessage = `A confirmation email has been sent to <span class="bold-email">${emailInput.value}</span>. Please open it and click the button inside to confirm your subscription`;
  document.querySelector(".confirmation-text").innerHTML = successMessage;
}

这种方式后续调整样式只需修改CSS，不用改动JS代码。

内容的提问来源于stack exchange，提问作者Rosie Lockett