如何移除元素内文本且保留子元素？针对动态href锚标签场景

没问题，我来帮你搞定这个需求！你想要保留<p>里的锚标签，同时删掉其他文本内容，又不想改动锚标签的动态href属性，完全可以通过直接操作DOM节点来实现，不用冒险修改innerHTML（毕竟innerHTML会重新解析元素，可能意外破坏原有的动态属性）。

方法一：精准移除文本节点（通用场景） #

这种方法会遍历<p>的所有子节点，只保留元素节点（也就是你的锚标签），直接删掉文本/注释节点，完全不会触碰锚标签的任何属性：

// 获取目标段落元素
const targetParagraph = document.querySelector('p');

// 遍历子节点的副本（避免遍历过程中修改原节点列表导致的异常）
Array.from(targetParagraph.childNodes).forEach(node => {
  // 只移除文本节点和注释节点，元素节点（锚标签）保留
  if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE) {
    targetParagraph.removeChild(node);
  }
});

方法二：简化版（仅当段落内只有一个锚标签时适用） #

如果你的<p>里只有这一个锚标签，还可以用更简洁的方式——直接把段落的内容替换成锚标签的完整HTML（包括所有属性）：

const targetParagraph = document.querySelector('p');
const linkElement = targetParagraph.querySelector('a');

if (linkElement) {
  // 用锚标签的完整HTML替换段落内容，保留所有属性
  targetParagraph.innerHTML = linkElement.outerHTML;
}

效果验证 #

针对你给出的示例代码：

<p>Text to be removed <a href="blahrdyblahr">Link Text</a></p>

两种方法处理后，最终的DOM结构都会变成：

<p><a href="blahrdyblahr">Link Text</a></p>

锚标签的href属性完全保留，没有任何修改~

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