如何在JavaScript中修改HTML元素文本且不删除子元素？

你的问题根源在于使用innerText赋值时，会完全替换元素内的所有内容——包括子元素。要保留子元素同时只替换目标元素的文本内容，我们需要针对性地操作文本节点，而不是直接覆盖整个元素内容。

这里有一个改进后的方案：

const elementsToTranslate = document.querySelectorAll('[data-i18next]');

// 专门处理元素文本替换，保留子元素
function replaceElementText(element, translationKey) {
  // 筛选出元素的直接文本节点（排除子元素）
  const directTextNodes = Array.from(element.childNodes).filter(
    node => node.nodeType === Node.TEXT_NODE
  );

  if (directTextNodes.length) {
    // 替换所有直接文本节点的内容
    directTextNodes.forEach(node => {
      node.textContent = i18next.t(translationKey);
    });
  } else {
    // 如果元素没有直接文本节点（比如空元素或只有子元素），直接设置文本
    element.textContent = i18next.t(translationKey);
  }
}

// 遍历需要翻译的元素
elementsToTranslate.forEach(element => {
  const translationKey = element.getAttribute('data-i18next');
  replaceElementText(element, translationKey);
});

为什么这个方案有效？ #

• 我们通过childNodes获取元素的所有子节点，然后筛选出文本节点（nodeType === Node.TEXT_NODE），这些就是元素本身的文本内容，不包含子元素。
• 只替换这些文本节点的内容，子元素（比如你的<span>）会被完整保留，同时子元素如果带有data-i18next属性，也会被单独处理翻译。

举个实际例子，你的HTML结构：

<h1 data-i18next="header-title" class="header__title">
  原标题文本
  <span data-i18next="header__subtitle" class="header__subtitle">原副标题文本</span>
</h1>

使用改进后的代码后：

• <h1>的"原标题文本"会被替换为i18next.t('header-title')的翻译内容
• <span>会被保留，并且它的文本会被替换为i18next.t('header__subtitle')的翻译内容
• 两者的层级关系完全不变

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