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>

 

 wrap结果是:

 

 使用wrapAll

 

 结果是:

 

 使用wrapInner

 

 结果是:

 

 

 

posted @ 2019-09-13 16:25  AxeBurner  阅读(186)  评论(0编辑  收藏  举报