如何查找未包含在div元素中的文本并将其包裹进div标签？

你当前的代码问题在于$( ".details" ).text()会把.details里的所有文本内容提取成一个单独的字符串，之后的wrap操作根本不会作用在原DOM的独立文本节点上，自然达不到预期效果。

要实现把所有零散的文本节点（比如你例子里的elephant）包裹进div，需要精准定位这些文本节点，具体代码如下：

$('.details').contents().filter(function() {
  // 筛选出非空白的文本节点
  return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
}).wrap('<div></div>');

代码解释： #

• .contents()：获取.details下的所有子节点，包括元素节点（比如已有的div）和文本节点，这是能定位到elephant这类零散文本的关键。
• .filter()：通过nodeType === 3判断是否为文本节点，再用$.trim()排除掉那些仅包含换行、空格的空文本节点（避免给空白内容也套div）。
• .wrap('<div></div>')：给每个符合条件的文本节点单独包裹一个div标签，完美匹配你想要的最终HTML结构。

你的CSS样式.details div已经能覆盖新生成的div，不需要修改；引入的jQuery 3.3.1版本也完全兼容这段代码。

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