如何删除元素内文本且保留子元素，并添加指定HTML内容？

需求明确：移除<label>标签中的"Joe Doe"文本内容，保留内部的<input>子元素，随后添加指定HTML内容。

原始示例代码 #

<label><input type="radio" name="field-value-1359303" value="Joe Doe">Joe Doe</label>

补全后的jQuery代码 #

你只需要在parents('label')之后添加过滤并移除文本节点的逻辑即可，完整代码如下：

$('input[value="Joe Doe"]')
  .hide()
  .parents('label')
  .contents().filter(function() {
    // 过滤出文本节点（nodeType为3）并移除
    return this.nodeType === 3;
  }).remove()
  .end() // 回到label元素的链式调用上下文
  .append('<div>my content</div>');

逻辑说明 #

• .contents()方法会获取元素的所有子节点，包括文本节点和元素节点
• 通过filter筛选出nodeType === 3的节点（即纯文本节点），调用.remove()删除这些文本
• .end()用来回到之前的label元素上下文，确保后续的.append()作用在<label>标签上

最终得到的DOM结构 #

<label><input type="radio" name="field-value-1359303" value="Joe Doe"><div>my content</div></label>

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