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>
        //这个页面点击触发后会很乱,建议想看的小伙伴,把部分注释后再看
        function f1() {
            //主动追加
            //兄弟节点.after()  后置
            $('#coco').after('<li>哈哈哈哈哈</li>');
            //兄弟节点.before() 前置
            $('#coco').before('<li>啊啊啊啊啊</li>');
            $('#shu li:first').after($('#xiang')); //已有节点追加,会发生物理位置移动


            //被动追加
            //.insertAfter()  后置
            $('<li>哥们我活好,你可要做个网站吗?</li>').insertAfter($('#fei'));
            //insertBefore()    前置
            $('<li>嘿哈嘿哈</li>').insertBefore($('#fei'));
            $('wu li:first').insertBefore($('#kk')); //已有节点追加,会发生物理位置移动

        }
    </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>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

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

修远兮

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

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

推荐文章RECOMMEND