本文分享一個的留言板新增留言、刪除留言的小案例，內附詳細程式碼分析、但不涉及操作，只解析底層程式碼實現思路：

實現效果

執行程式碼介面：

輸入留言進行新增：（最新的留言會在最頂部顯示）

刪除留言：（點選哪條則刪除該條留言）

主要功能效果展示完畢，HTML和樣式這裡不影響，下面直接上程式碼：

<script>
        // 獲取所需元素物件
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 註冊事件
        btn.onclick = function () { // 給釋出按鈕繫結點選事件
            if (text.value == '') { // 判www.cppcns.com
 
斷text.value是否為空，即用戶是否有輸入內容
                alert('不能釋出空內容哦！');
                return false;
            } else {    // 使用者有輸入內容則獲取到該內容賦值給建立的元素li進行顯示
                // 1.建立元素
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='script:;' title='刪除該留言'>刪除</a>";  // 將使用者輸入的內容賦值給建立的li元素並且在後面新增一個a標籤用於後續刪除該留言
                // 2.新增元素
                // ul.appendChild(li);  // 這樣寫留言是追加到後面顯示的
                ul.insertBefore(li,ul.children[0]);    // 讓新增的留言在最上面顯示，即從下往上顯示的順序
                
                // 刪除元素：刪除的是當前a標籤所在的li節點也就是它的父元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // 需要刪除的li是a的父元素
 
即this.parentNode;
                        ul.removeChild(this.parentNode);    // 刪除ul裡的li節點，而li是當前a標籤的父節點，注意它們之間的關係
                    }
                }
            }
            text.value = '';    // 最後將留言輸入框中的內容清空方便再次留言
            
        }
</script>

核心知識：

向頁面新增元素節點：

我們想要給頁面新增一個新的元素分兩步：1.建立元素；2.新增元素

1.建立元素：element.createElement('建立的元素標籤');
2.新增元素：node.appendChild(child); // node是父級即新增在哪個父級元素之中，child是建立好的子級元素，注：這樣的新增元素方式類似於陣列中的push方法即在後面追加元素
新增節點到指定位置：（主要是新增到指定元素前面顯示）
node.insertBefore(child,指定元素); // “指定元素”指將child新增到哪個元素的前面，“指定元素”一定也是node的子元素

刪除頁面元素節點：

node.removeChild(child);  // node是父元素，child是node中的一個子元素

主要實現思路：這裡就是主要運用向頁面新增節點和刪除節點的功能，將兩個功能各自繫結到不同的按鍵上，如將新增節點的功能給到“釋出”按鈕，將刪除節點的功能給到“刪除”按鈕，即實現了這樣一個簡易版的留言板案例。詳細解析建議結合JS程式碼，內含詳細註釋。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。