如何使用jQuery仅修改目标元素文本而不影响内部子元素？

看起来你踩了jQuery text() 方法的一个常见坑——它确实会替换目标元素内的所有内容（包括子元素的文本），因为本质上它是清空元素后再插入新文本。下面给你几个可行的解决方案，按需选择：

方案1：单独包裹需要修改的文本（推荐） #

最稳妥易维护的方式，是提前把要修改的文本用一个独立的内联容器（比如<span>）包裹起来，这样后续直接定位这个容器修改即可，完全不会影响其他子元素：

修改后的HTML结构 #

<div id="div_text">
  <span class="modify-target">原始文本</span>
  <span>子元素文本（不会被修改）</span>
</div>

jQuery代码 #

$('#div_text .modify-target').text('changed_div_text');

方案2：直接操作原生文本节点 #

如果不想修改原始HTML，可以定位到父元素下的直接文本节点进行修改，跳过子元素节点：

jQuery代码 #

// 获取目标元素的原生DOM对象
const parentEl = $('#div_text')[0];
// 筛选出非空白的直接文本节点
const targetTextNode = Array.from(parentEl.childNodes).find(node => {
  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '';
});
// 修改文本内容
if (targetTextNode) {
  targetTextNode.textContent = 'changed_div_text';
}

方案3：用jQuery的contents()筛选文本节点 #

利用jQuery的contents()方法获取所有子节点（包括文本节点），再筛选出需要修改的文本节点：

jQuery代码 #

$('#div_text').contents().filter(function() {
  // 只保留非空白的文本节点
  return this.nodeType === Node.TEXT_NODE && $.trim(this.textContent) !== '';
}).first().text('changed_div_text');

为什么原方法不行？ #

简单说，$('#div_text').text('xxx') 的执行逻辑是：清空div_text内的所有子元素和文本节点，然后插入新的文本节点。所以它会覆盖掉所有内部内容，这就是你看到的“同时修改内部子元素文本”的原因——其实是子元素被清空了，并非修改了子元素的文本。

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