JavaScript實(shí)現留言板添加刪除留言

本文分享一個(gè)JavaScript的留言板添加留言、刪除留言的小案例，內附詳細代碼分析、但不涉及數據庫操作，只解析底層代碼實(shí)現思路：

實(shí)現效果

運行代碼界面：

輸入留言進(jìn)行添加：（最新的留言會(huì )在最頂部顯示）

刪除留言：（點(diǎn)擊哪條則刪除該條留言）

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

<script>
        // 獲取所需元素對象
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 注冊事件
        btn.onclick = function () { // 給發(fā)布按鈕綁定點(diǎn)擊事件
            if (text.value == '') { // 判斷text.value是否為空，即用戶(hù)是否有輸入內容
                alert('不能發(fā)布空內容哦！');
                return false;
            } else {    // 用戶(hù)有輸入內容則獲取到該內容賦值給創(chuàng  )建的元素li進(jìn)行顯示
                // 1.創(chuàng  )建元素
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;' title='刪除該留言'>刪除</a>";  // 將用戶(hù)輸入的內容賦值給創(chuàng  )建的li元素并且在后面添加一個(gè)a標簽用于后續刪除該留言
                // 2.添加元素
                // ul.appendChild(li);  // 這樣寫(xiě)留言是追加到后面顯示的
                ul.insertBefore(li, ul.children[0]);    // 讓新增的留言在最上面顯示，即從下往上顯示的順序
                
                // 刪除元素：刪除的是當前a標簽所在的li節點(diǎn)也就是它的父元素
                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節點(diǎn)，而li是當前a標簽的父節點(diǎn)，注意它們之間的關(guān)系
                    }
                }
            }
            text.value = '';    // 最后將留言輸入框中的內容清空方便再次留言
            
        }
</script>

核心知識：

向頁(yè)面添加元素節點(diǎn)：

我們想要給頁(yè)面添加一個(gè)新的元素分兩步：1.創(chuàng )建元素；2.添加元素

1.創(chuàng )建元素：element.createElement('創(chuàng )建的元素標簽');
2.添加元素：node.appendChild(child); // node是父級即添加在哪個(gè)父級元素之中，child是創(chuàng )建好的子級元素，注：這樣的添加元素方式類(lèi)似于數組中的push方法即在后面追加元素
添加節點(diǎn)到指定位置：（主要是添加到指定元素前面顯示）
node.insertBefore(child, 指定元素); // “指定元素”指將child添加到哪個(gè)元素的前面，“指定元素”一定也是node的子元素

刪除頁(yè)面元素節點(diǎn)：

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

主要實(shí)現思路：這里就是主要運用向頁(yè)面添加節點(diǎn)和刪除節點(diǎn)的功能，將兩個(gè)功能各自綁定到不同的按鍵上，如將添加節點(diǎn)的功能給到“發(fā)布”按鈕，將刪除節點(diǎn)的功能給到“刪除”按鈕，即實(shí)現了這樣一個(gè)簡(jiǎn)易版的留言板案例。詳細解析建議結合JS代碼，內含詳細注釋。

以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。