jQuery操作元素

阅读量: 257 编辑

jQuery操作页面元素

一、jQuery操作元素常用方法

- remove()     //删除元素
- empty()       //清空内部元素
- append()     //在被选元素的结尾插入内容
- prepend()    //在被选元素的开头插入内容
- after()         //在被选元素之后插入内容 兄弟
- before()      //在被选元素之前插入内容

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    </head>
    <body>
    
        <ul id="myUL">
            <li>java</li>
            <li class="abc">python</li>
            <li>javascript</li>
            <li>html</li>
        </ul>
    
        <div>eeee</div>
    
        <!-- 点击事件 -->
        <button id="myBtn" onclick="doClick()">点击</button>
    
        <script type="text/javascript">
            function doClick(){
                // $('#myUL').remove()
                // $('#myUL').empty()
                // $('#myUL').append('<li>c语言</li>')
                // $('#myUL').prepend('<li>c语言</li>')
                // $('#myUL').after('<div>ddd</div>')
                // $('#myUL').before('<div>ddd</div>')
            }
        </script>
    </body>
</html>