如何使用jQuery替换含子标签的div中的动态未知文本内容

这个问题我之前也碰到过，刚好有几个靠谱的方法能解决，不用改动原div的结构，而且不管那个动态生成的文本具体是什么内容都能搞定：

方法一：筛选文本节点直接替换 #

利用jQuery的contents()方法可以获取元素下的所有子节点（包括文本节点、元素节点），然后我们只需要筛选出非空的文本节点进行替换即可：

$('#Field').contents().filter(function() {
  // nodeType为3代表是文本节点，同时过滤掉空的文本节点
  return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
}).replaceWith('这里放你的新文本');

这个方法的优势是不需要依赖固定的元素结构，只要目标文本是#Field下的直接文本节点，就能精准定位替换，哪怕后续span或者子div的位置微调也不受影响。

方法二：保留原有元素重新组装 #

如果原div的结构（开头的span、末尾的子div）是固定不变的，也可以先把这些需要保留的元素克隆下来，然后清空原div，再重新把克隆的元素和新文本组装进去：

var $field = $('#Field');
// 克隆需要保留的span和内部div
var $savedSpan = $field.find('span').clone();
var $savedInnerDiv = $field.find('div').clone();

// 清空原容器，重新添加内容
$field.empty()
      .append($savedSpan)
      .append('这里放你的新文本')
      .append($savedInnerDiv);

这种方法逻辑更直观，适合结构稳定的场景，能确保原有元素的样式和事件都被保留下来。

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