JS大神教你：原生JS和jQuery包裹HTML文本节点到P标签！

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何用原生JavaScript和jQuery将HTML文本节点包裹在P标签中？ 》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用原生JavaScript和jQuery包裹HTML文本节点到P标签

本文探讨如何使用原生JavaScript和jQuery将HTML文本节点包裹在

标签中。问题在于，给定一个HTML文档，其文本节点未被

或标签包裹，需要将这些文本节点分别提取并用

标签包裹。

方法：HTML文本节点处理

我们将介绍两种方法：原生JavaScript和jQuery。 核心思路是遍历节点，找到文本节点(nodeType == 3)，然后用

标签包裹。

原生JavaScript解法:

此方法直接操作DOM。首先获取目标父元素，遍历其子节点，判断节点类型，如果是文本节点(nodeType == 3)，则创建

元素，设置其内容为文本节点的值，并用新创建的

元素替换原来的文本节点。

let $parent = $('#xxx'); // 获取目标父元素
let list = Array.prototype.slice.call($parent.contents()); // 获取子节点并转换为数组
list.forEach(function(item) {
  if (item.nodeType == 3) { // 判断是否为文本节点
    $(item).wrap('
'); // 使用wrap()方法包裹文本节点
  }
});

两种方法都实现了相同的功能，选择哪种方法取决于项目的具体需求和对JavaScript库的依赖。 原生JavaScript方法更轻量，而jQuery方法更简洁易读。 记住将'xxx'替换为你的目标元素的ID。

到这里，我们也就讲完了《JS大神教你：原生JS和jQuery包裹HTML文本节点到P标签！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！