JavaScript如何實現留言板添加刪除留言

本篇內容介紹了“JavaScript如何實現留言板添加刪除留言”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

實現效果

運行代碼界面：

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

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

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

<script>
        // 獲取所需元素對象
        var text = document.querySelector("textarea");
        var btn = document.querySelector("button");
        var ul = document.querySelector("ul");
        // 注冊事件
        btn.onclick = function () { // 給發布按鈕綁定點擊事件
            if (text.value == "") { // 判斷text.value是否為空，即用戶是否有輸入內容
                alert("不能發布空內容哦！");
                return false;
            } else {    // 用戶有輸入內容則獲取到該內容賦值給創建的元素li進行顯示
                // 1.創建元素
                var li = document.createElement("li");
                li.innerHTML = text.value + "<a href="javascript:;" 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中的一個子元素

主要實現思路：這里就是主要運用向頁面添加節點和刪除節點的功能，將兩個功能各自綁定到不同的按鍵上，如將添加節點的功能給到“發布”按鈕，將刪除節點的功能給到“刪除”按鈕，即實現了這樣一個簡易版的留言板案例。

“JavaScript如何實現留言板添加刪除留言”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！