jQuery替换和包裹节点

Posted 2022-10-25 bichen-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery替换和包裹节点相关的知识，希望对你有一定的参考价值。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery替换和包裹节点</title>
    <script type="text/javascript"src="../jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="div">

    <p id="a">今天是教师节</p>
    <p id="b">今天是劳动节</p>
</div>




</body>
</html>

结果是：

技术图片

开始替换：

技术图片

结果是：

技术图片

把html里填的标签换成字符串:

技术图片

结果：

技术图片

总结：

替换节点关键字： replaceWith replaceAll

区别：

1、语法：

$(标签对象).replaceWith(html);

$(html).replaceAll(标签对象);

2、用法限制上的区别：

replaceWith可以使用标签或字符串进行替换

但replaceAll只能使用标签进行替换

--------------------------------------------------------------------------------------------------

包裹节点：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>包裹节点</title>
    <script type="text/javascript"src="../jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="div">
    <p>今天</p>
    <p>是</p>
    <p>中秋节！！</p>

</div>

<script>
    /**
     * 包裹节点的关键字以及语法
     * wrap,wrapAll,wrapInner
     *$(标签对象).wrap(标签);
     *$(标签对象).wrapAll(标签);
     * $(标签对象).wrapInner(标签);
     *
     */
  //需求：使用strong标签使div下的每个p标签的字体都变粗
    $(".div p").wrap("<srtong></srtong>")

</script>
</body>
</html>