您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript怎么實(shí)現(xiàn)簡(jiǎn)單版的留言發(fā)布與刪除”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
首先用戶在輸入框中輸入內(nèi)容,按下發(fā)布按鈕,內(nèi)容到下面的li中,并且清空輸入框中的內(nèi)容
下面這個(gè)li元素就是后面創(chuàng)建的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea { resize: none; border: 1px solid pink } </style> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>發(fā)布</button> <ul> </ul> <script> //點(diǎn)擊發(fā)布按鈕,獲取文本域中的文本,給下面新創(chuàng)建li中的值 //獲取文本框元素、按鈕元素 var text = document.querySelector('textarea') var btn = document.querySelector('button') var ul = document.querySelector('ul') //當(dāng)按下按鈕后就創(chuàng)建新的li元素,放到ul的后面 btn.onclick = function() { //創(chuàng)建li元素 因?yàn)槭敲堪匆淮伟粹o,下面就會(huì)添加一個(gè)li,需要用到循環(huán) //需要判斷,當(dāng)文本框里面的內(nèi)容為空時(shí),按下按鈕是不會(huì)添加的 if (text.value != '') { var li = document.createElement('li') ul.appendChild(li) //添加節(jié)點(diǎn) //賦值li里面的內(nèi)容 li.innerHTML = text.value //按下按鈕后,文本框里面的值要清空 text.value = '' } } </script> </body> </html>
分析:
1、點(diǎn)擊按鈕后,就動(dòng)態(tài)創(chuàng)建一個(gè)li,添加到ul里面
2、創(chuàng)建li的同時(shí),把文本域中的值通過li.innerHTML賦給li
3、如果想把新的留言顯示到后面就用appendChild,如果顯示到前面就用insertBefore
怎么實(shí)現(xiàn)放在前面:
并且實(shí)現(xiàn)刪除留言的案例:
添加li后面對(duì)應(yīng)添加一個(gè)刪除按鈕
1、把文本域的值賦值給li的同時(shí)多加一個(gè)刪除的鏈接
2、需要把每個(gè)鏈接獲取過來,當(dāng)點(diǎn)擊某一個(gè)鏈接的時(shí)候,刪除當(dāng)前鏈接所在的li;也就是當(dāng)前鏈接的父親
3、阻止鏈接跳轉(zhuǎn)可以添加javascript:void(0),或者javascript:;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea { resize: none; border: 1px solid pink } li { background-color: pink; margin-top: 2px; width: 630px; height: auto; line-height: 30px; } p { font-size: 15px; margin-top: 0px; float: left; } button { width: 50px; height: 30px } li a { float: right; } </style> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> <button class="btn">發(fā)布</button> <ul> </ul> <script> //點(diǎn)擊發(fā)布按鈕,獲取文本域中的文本,給下面新創(chuàng)建li中的值 //獲取文本框元素、按鈕元素 var text = document.querySelector('textarea') var btn = document.querySelector('.btn') var ul = document.querySelector('ul') console.log() //當(dāng)按下按鈕后就創(chuàng)建新的li元素,放到ul的后面 btn.onclick = function() { //創(chuàng)建li元素 因?yàn)槭敲堪匆淮伟粹o,下面就會(huì)添加一個(gè)li,需要用到循環(huán) //需要判斷,當(dāng)文本框里面的內(nèi)容為空時(shí),按下按鈕是不會(huì)添加的 if (text.value != '') { var li = document.createElement('li') //li里面創(chuàng)建一個(gè)p放內(nèi)容 // var p = document.createElement('p') // var dele = document.createElement('button') // ul.appendChild(li) ul.insertBefore(li, ul.children[0]) //在li里面添加p // console.log(ul.children[0]) // ul.children[0].appendChild(p) //在li里面添加刪除按鈕 // ul.children[0].appendChild(dele) //添加節(jié)點(diǎn) //賦值li里面的內(nèi)容 li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>" // dele.innerHTML = '刪除' // dele.style.float = 'right' //按下按鈕后,文本框里面的值要清空 text.value = '' //刪除元素,刪除的是li,當(dāng)前a鏈接的父親 var as = document.querySelectorAll('a') for (var i = 0; i < as.length; i++) { as[i].onclick = function() { //node.removeChild(child) // this.parentNode li 父親為ul ul.removeChild(this.parentNode) } } //這個(gè)循環(huán)操作為什么放在按鈕點(diǎn)擊事件外面就不會(huì)起作用 } } </script> </body> </html>
“JavaScript怎么實(shí)現(xiàn)簡(jiǎn)單版的留言發(fā)布與刪除”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。