如何仅修改label标签的文本内容而保留内部元素？

嘿，我太懂你这个困扰了！之前我也踩过textContent的这个坑——本来只想改label里的文字，结果连checkbox都给弄没了，属实头疼。

先看你给出的原始HTML结构：

<div class="here_is_div"> 
  <label class="a_label"> 
    <input type="checkbox" name="checkbox"> Hello world 
  </label> 
</div>

你尝试用textContent修改文本：

document.getElementsByTagName('label')[0].textContent = "Hello World is replaced"

结果发现它把label里的checkbox也一起替换掉了——这是因为textContent会覆盖元素内的所有内容，包括子元素和文本节点，自然就把input给删掉了。

不想用innerHTML的话，有几个更稳妥的方法：

方法一：直接定位并修改文本节点 #

label元素的子节点里，除了input元素，还有一个独立的文本节点（就是"Hello world"那部分）。我们可以遍历子节点找到它，然后直接修改：

const targetLabel = document.getElementsByTagName('label')[0];
// 遍历label的所有子节点
for (const node of targetLabel.childNodes) {
  // 筛选出类型为文本节点，且内容不是空字符串的节点
  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
    node.textContent = "Hello World is replaced";
    break; // 找到后就退出循环，避免修改其他可能的文本节点
  }
}

这个方法完全基于DOM节点操作，没有innerHTML可能带来的XSS风险，也不需要改动原始HTML结构，是最推荐的方案之一。

方法二：给文本单独包裹容器（如果能改HTML的话） #

如果你有权限调整原始HTML，最省心的方式是把label里的文本放在一个<span>里，之后直接修改这个span的内容就行：
修改后的HTML：

<div class="here_is_div"> 
  <label class="a_label"> 
    <input type="checkbox" name="checkbox"> <span class="label-text">Hello world</span>
  </label> 
</div>

然后JS代码就非常简洁了：

document.querySelector('.label-text').textContent = "Hello World is replaced";

这种方式代码可读性强，后期维护也更方便。

方法三：先保存input再重构label内容 #

如果前面两种方法都不适用，还可以先把input元素存起来，清空label后再把input加回去，最后添加新文本：

const targetLabel = document.getElementsByTagName('label')[0];
const checkbox = targetLabel.querySelector('input');
// 清空label内容
targetLabel.textContent = '';
// 把checkbox重新添加到label里
targetLabel.appendChild(checkbox);
// 添加新的文本内容
targetLabel.append("Hello World is replaced");

不过这个方法相对繁琐，不如前两种高效，只建议在特殊场景下使用。

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