JavaScript如何實(shí)現(xiàn)留言板添加刪除留言

本篇內(nèi)容介紹了“JavaScript如何實(shí)現(xiàn)留言板添加刪除留言”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

實(shí)現(xiàn)效果

運(yùn)行代碼界面：

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

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

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

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

核心知識(shí)：

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

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

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

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

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

主要實(shí)現(xiàn)思路：這里就是主要運(yùn)用向頁(yè)面添加節(jié)點(diǎn)和刪除節(jié)點(diǎn)的功能，將兩個(gè)功能各自綁定到不同的按鍵上，如將添加節(jié)點(diǎn)的功能給到“發(fā)布”按鈕，將刪除節(jié)點(diǎn)的功能給到“刪除”按鈕，即實(shí)現(xiàn)了這樣一個(gè)簡(jiǎn)易版的留言板案例。

“JavaScript如何實(shí)現(xiàn)留言板添加刪除留言”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！