如何使用jQuery/原生JS清空div子元素文本且不删除DOM结构

云上老周

2026-9-29

实现方案

原生JS实现

核心逻辑是递归遍历目标元素下的所有节点，仅清空文本节点（nodeType === 3）的内容，保留所有元素节点的结构和属性不变。

// 封装清空文本的通用函数
function clearAllText(parentNode) {
  const childNodes = parentNode.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const currentNode = childNodes[i];
    // 文本节点直接清空内容
    if (currentNode.nodeType === Node.TEXT_NODE) {
      currentNode.textContent = '';
    } 
    // 元素节点递归处理子节点
    else if (currentNode.nodeType === Node.ELEMENT_NODE) {
      clearAllText(currentNode);
    }
  }
}

// 调用示例
clearAllText(document.getElementById('student_profile'));

jQuery实现

可以封装为jQuery插件方便调用：

// 封装jQuery插件
$.fn.clearInnerText = function() {
  return this.each(function() {
    $(this).contents().each(function() {
      if (this.nodeType === Node.TEXT_NODE) {
        this.textContent = '';
      } else if (this.nodeType === Node.ELEMENT_NODE) {
        $(this).clearInnerText();
      }
    });
  });
};

// 调用示例
$('#student_profile').clearInnerText();