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>