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() {
            //主动追加
            //append()  后置
            $('#shu').append('<li>abcd</li>');
            $('#shu').append($('#wu li:eq(1)'));  //使用派生选择器,将#wu里面的li,追加到#shu里面
            //prepend() 前置
            $('#shu').prepend('<li>dcba</li>');


            //被动追加
            //appendTo()    后置
            $('<li>学代码的禽兽们又在搜功能了</li>').appendTo($('#shu'));
            //prependTo()   前置
            $('<li>啊啊啊啊啊</li>').prependTo($('#shu'));
            $('#xiang').prependTo('#shu'); //已有节点追加
        }
    </script>
</head>
<body>
<h2>节点追加(父子)</h2>
<ul id="shu">
    <li>aaaaa</li>
    <li>bbbbb</li>
    <li>ccccc</li>
    <li>ddddd</li>
</ul>
<ul id="wu">
    <li>eeeee</li>
    <li>fffff</li>
    <li>ggggg</li>
    <li>hhhhh</li>
    <li id="xiang">你们这群禽兽</li>
</ul>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

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

修远兮

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

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

推荐文章RECOMMEND