jQuery22(替换元素,包裹元素)

最新推荐文章于 2021-03-17 17:25:07 发布

天赋进行时

最新推荐文章于 2021-03-17 17:25:07 发布

阅读量1.1k

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50641557

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

替换元素

第一种方式:
原节点.replaceWith(新节点).
实例:

$('br').replaceWith('<hr color="red" />')

第二种:
新节点.replaceAll(原节点)
实例:

 $('<hr color="red" />').replaceAll('br')

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //替换元素,节点
                //第一种方式
                //$('br').replaceWith('<hr color="red" />')
                //第二种方式,待替换的在前面
                $('<hr color="red" />').replaceAll('br')
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="替换节点" id='btn' /><br />
    静夜思<br />
    床前明月光,<br />
    疑是地上霜.<br />
    举头望明月,<br />
    低头思故乡.<br />
</body>
</html>

包裹元素

wrap方法:
为选中的每个标签都会用一对font标签,如果需要加多个,则会产生大量的冗余代码
实例:

$('div p').wrap('<font color="blue"></font>');

wrapAll方法:
为所有的p标签都用一对font标签包裹
实例:

$('div p').wrapAll('<font color="blue"></font>');

wrapInner方法:
把p标签的文字内容用一对font标签包住,但是p在外面,添加的内容在里面.嵌套方式不同(第一种)
实例:

 $('div p').wrapInner('<font color="blue"></font>');

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //为选中的每个标签都会用一对font标签包裹上,如果标签多的话,会产生大量冗余代码
                //$('div p').wrap('<font color="blue"></font>');
                //所有的p标签都被一对font标签包裹
                //$('div p').wrapAll('<font color="blue"></font>');
                //吧p标签的文字内容用一对font标签包住,但是p标签在外面,加的在里面
                $('div p').wrapInner('<font color="blue"></font>');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="变" id='btn' />
    <div style='width: 300px; height: 200px; border: 1px solid red;'>
        <p>
            这是p
        </p>
        <p>
            这也是p
        </p>
    </div>
</body>
</html>

天赋进行时

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery22(替换元素,包裹元素)

替换元素第一种方式: 原节点.replaceWith(新节点). 实例:$('br').replaceWith('<hr color="red" />')第二种: 新节点.replaceAll(原节点) 实例: $('<hr color="red" />').replaceAll('br')完整实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
复制链接

扫一扫

专栏目录