使用jQuery替换文本但保留HTML标签（需保留input元素）

你需要替换label中的指定文本，但原有代码会删除input元素——核心原因是text()会提取label下所有文本内容，再用html()覆盖时会把input节点一并替换掉。下面是几种可行的解决方案：

方案1：直接定位并修改目标文本节点 #

利用DOM节点类型判断，找到input后的独立文本节点，直接修改其内容：

const labelElement = document.querySelector('#woo_ml_subscribe_field label');
// 遍历label的子节点
for (const node of labelElement.childNodes) {
  // 筛选出目标文本节点
  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === 'Yes, I want to receive News, Discounts and Promotions') {
    node.textContent = ' my custom text';
    break;
  }
}

方案2：先保存input再重构label内容 #

先把input元素保存下来，再重新设置label的HTML内容：

const $label = $('#woo_ml_subscribe_field label');
const $input = $label.find('input');
// 用input的原生HTML加上新文本重构label内容
$label.html($input.prop('outerHTML') + ' my custom text');

方案3：jQuery简洁写法筛选文本节点 #

通过contents()获取所有子节点，过滤出目标文本节点后替换：

$('#woo_ml_subscribe_field label')
  .contents()
  .filter(function() {
    return this.nodeType === Node.TEXT_NODE && this.textContent.trim() === 'Yes, I want to receive News, Discounts and Promotions';
  })
  .replaceWith(' my custom text');

以上三种方法都能在保留input元素的前提下，准确替换目标文本。

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