Chrome扩展开发：如何用jQuery选择并修改Span内的数字10？

针对你遇到的<span>10<div>Number</div></span>结构，要修改其中的数字10，可以用以下几种jQuery方案：

• 直接操作文本节点
  利用.contents()获取span下的所有子节点（包括文本和元素），第一个子节点就是包含数字10的文本节点，直接替换内容：

  // 先定位目标span，示例用全局span，实际要根据页面结构写更精准的选择器，比如$('span.specific-class')
  $('span').contents().first().replaceWith('你想要的新数字');
  

• 原生DOM节点操作
  也可以直接获取span的原生DOM节点，找到第一个子文本节点修改内容：

  const $targetSpan = $('span'); // 定位目标span
  const textNode = $targetSpan[0].firstChild;
  textNode.textContent = '新数字';
  

• 重置内容并保留原有元素
  如果担心文本节点位置不确定，可以先保存里面的div元素，清空span后重新添加新数字和原div：

  const $targetSpan = $('span');
  const $numberDiv = $targetSpan.find('div'); // 保存原有的div
  $targetSpan.empty().text('新数字').append($numberDiv);
  

注意：实际使用时一定要给目标span加上精准的选择器，避免误改页面上其他span元素。

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