jQuery替换和包裹节点

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_30480583

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bichen-01/p/11517090.html

版权

案例代码：

<!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

结果是：

转载于:https://www.cnblogs.com/bichen-01/p/11517090.html

weixin_30480583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery替换和包裹节点

案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery替换和包裹节点</title> <script type="text/javascript"src="../...
复制链接

扫一扫