jQuery操做dom相关的方法

时间 2019-12-06

标签 jquery dom 相关方法栏目 JQuery 繁體版

原文原文链接

1.添加节点html

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

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

　　3）after()方法：会把建立的节点当其兄弟节点，而且把建立的节点放在以后spa

　　4）before()方法：会把建立的节点当其兄弟节点，而且把建立的节点放在以前3d

<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>

效果图code

2.删除节点htm

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

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

<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>

效果图rem