jQuery操作dom相关的方法

最新推荐文章于 2024-10-02 05:39:15 发布

dongciqiu0026

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/superCwen/p/9960058.html

版权

1.添加节点

　　1）append()方法：会把创建的节点添加为其子节点，并且把子节点排在最后面

　　2）prepend()方法：会把创建的节点添加为其子节点，把这个节点排在最前面

　　3）after()方法：会把创建的节点当其兄弟节点，并且把创建的节点放在之后

　　4）before()方法：会把创建的节点当其兄弟节点，并且把创建的节点放在之前

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        ul>li{
            
            list-style:none;
            
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            var $li=$('<li>新加的节点,作为子节点，放在子节点最后面</li>')  //创建节点
            $('ul').append($li)               //会把$li节点放在子节点里的最后
            var $li1=$('<li>新加的节点，作为子节点，放在子节点最前面</li>')
            $('ul').prepend($li1)            //会把$li1节点放在子节点里的最前
            var $li2=$('<li>新加的节点，作为兄弟节点，放在ul后面</li>')
            $('ul').after($li2)
            var $li3=$('<li>新加的节点，作为兄弟节点，放在ul前面</li>')
            $('ul').before($li3)
        })
        
    </script>
    
<body>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
</body>
</html>

效果图

2.删除节点

　　1）remove()方法：删除指定的元素，并且删除子元素及内容

　　2）empty()方法：删除指定元素内容，但不会删除指定的元素，会删除指定元素的子元素及内容

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        ul>li{
            
            list-style:none;
            
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('ul').remove()           //会把ul及内容删除，子元素及内容也删除
            $('.father').empty()       //father类这个div不会删除，但内容会删除，子元素及内容删除
        })
        
    </script>
    
<body>
        <ul> ul
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
        <div class="father">
            我是div
            <div>我是子div</div>
        </div>
</body>
</html>