JavaScript 更改文本

更改现有页面中的文本，首先要选中正确的 DOM 元素。如果元素有已知且唯一的 id，可使用 getElementById()；它按 ID 查找元素，而不是按类名查找。HTML ID 在同一文档中应保持唯一。该方法只返回一个元素；找不到匹配项时会返回 null，不会更新所有碰巧具有相同 ID 的元素。

选中元素后，要决定是用新文本替换现有内容，还是在现有内容后追加文本。textContent 是用于读取或设置文本的属性。createTextNode() 用于创建文本节点，appendChild() 则将该节点添加到元素中。

使用 textContent 更改元素文本

如果希望元素显示的新文本取代当前内容，请设置 textContent。设置该属性会用文本替换元素的子内容；赋给它的字符串不会被解析为 HTML。如果字符串包含 < 和 > 等字符，它们仍会作为文本，而不会变成标记。

这个完整示例为元素提供了一个简单的替代对象，因此 JavaScript 可以独立运行。在浏览器页面中，可使用 document.getElementById("message") 选中现有元素，然后对它执行相同的赋值操作。

运行此示例：

本节中的代码以及显示的标签或输出仍为英文。

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }
}

const elements = { message: new TextElement("Before") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
};

const message = document.getElementById("message");
if (message) {
  message.textContent = "Hello, JavaScript!";
}
console.log(message.textContent);

这个保护判断处理了元素不存在的情况：如果 ID 不匹配，getElementById() 会返回 null，因此赋值会被跳过。在实际应用中，也可以明确处理这种情况，例如显示错误，或确保脚本在元素添加到文档后再运行。

使用 createTextNode() 和 appendChild() 追加文本

如果要保留现有文本并在其后添加内容，可以创建文本节点，再将它追加到选中的元素中。这不会替换元素当前的子内容。下面的独立示例展示了相关 DOM 操作；在浏览器中，可使用 document.createTextNode()，并将节点添加到 getElementById() 返回的元素中。

本节中的代码以及显示的标签或输出仍为英文。

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }

  appendChild(node) {
    this.textContent += node.textContent;
    return node;
  }
}

const elements = { message: new TextElement("Hello, ") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
  createTextNode(text) {
    return { textContent: text };
  },
};

const message = document.getElementById("message");
if (message) {
  const addedText = document.createTextNode("JavaScript!");
  message.appendChild(addedText);
}
console.log(message.textContent);

追加的节点会将自身的文本放在元素已有文本之后。需要保留现有内容，同时添加简短标签、状态消息或其他文本时，这种方式很有用。如果脚本可能在目标元素创建之前运行，请等页面创建该元素后再执行，或在追加之前处理返回的 null。

选择替换文本还是追加文本

如果元素应只显示新文本，请使用 textContent = value。如果要保留现有内容并在其后添加新文本，请使用 createTextNode(value) 和 appendChild()。这两种操作有所不同：设置属性会替换子内容，而追加节点会添加另一个子节点。

这两种方式都会把提供的值作为文本处理，而不是将其解析为 HTML。处理用户提供的文本时，通过这些 API 可以避免把该值转换为标记；但这不能取代应用可能还需要采取的其他安全措施。使用目标元素的 ID 调用 getElementById()；如果页面加载时机或条件标记可能导致元素缺失，请检查是否找到匹配项。然后根据是否需要保留原有文本，选择替换或追加。