jQuery 节点替换和删除

详细请看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        /*
        * 1.节点替换
        * $().replacewith();    被动替换
        * $().replaceAll()  主动替换
        *
        * 2.节点删除
        * $(父节点).empty();   父节点清空子节点
        * $(匹配节点).remove(); 删除指定的节点
        * */


        function f1() {
            //节点替换
            //新节点替换、已有节点去替换
            $('<li>小样的</li>').replaceAll($('#kk')); //新节点去替换(主动)
            $('#fei').replaceWith($('#coco'));  //将#fei的节点用#coco的节点替换(被动)


            //节点删除
            $('#ca').empty();  //清空对应的子节点
            $('#pp,#mm').remove(); //删除匹配到的节点
        }
    </script>
</head>
<body>
<h2>节点替换</h2>
<ul id="shu">
    <li>aaaaa</li>
    <li id="kk">bbbbb</li>
    <li id="coco">ccccc</li>
    <li>ddddd</li>
</ul>
<ul id="wu">
    <li>eeeee</li>
    <li id="fei">fffff</li>
    <li>ggggg</li>
    <li>hhhhh</li>
    <li id="xiang">你们这群禽兽</li>
</ul>
<ul id="ca">
    <li>JJJJJ</li>
    <li>KKKKK</li>
    <li>LLLLL</li>
    <li>MMMMM</li>
    <li>NNNNN</li>
</ul>
<ul id="ca2">
    <li id="pp">ppppp</li>
    <li>ooooo</li>
    <li id="mm">iiiii</li>
    <li>uuuuu</li>
    <li>yyyyy</li>
</ul>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND