JavaScript實(shí)現(xiàn)簡單版的留言發(fā)布與刪除

第JavaScript實(shí)現(xiàn)簡單版的留言發(fā)布與刪除btn.onclick=function(){

//創(chuàng)建li元素因?yàn)槭敲堪匆淮伟粹o，下面就會(huì)添加一個(gè)li，需要用到循環(huán)

//需要判斷，當(dāng)文本框里面的內(nèi)容為空時(shí)，按下按鈕是不會(huì)添加的

if(text.value!=''){

varli=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:;

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

textarea{

resize:none;

border:1pxsolidpink

li{

background-color:pink;

margin-top:2px;

width:630px;

height:auto;

line-height:30px;

font-size:15px;

margin-top:0px;

float:left;

button{

width:50px;

height:30px

lia{

float:right;

/style

/head

body

textareaname=""id=""cols="30"rows="10"/textarea

button發(fā)布/button

/ul

script

//點(diǎn)擊發(fā)布按鈕，獲取文本域中的文本，給下面新創(chuàng)建li中的值

//獲取文本框元素、按鈕元素

vartext=document.querySelector('textarea')

varbtn=document.querySelector('.btn')

varul=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!=''){

varli=document.createElement('li')

//li里面創(chuàng)建一個(gè)p放內(nèi)容

//varp=document.createElement('p')

//vardele=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+"ahref='javascript:;'刪除/a"

//dele.innerHTML='刪除'

//dele.style.float='right'

//按下按鈕后，文本框里面的值要清空

text.value=''

//刪除元素，刪除的是li,當(dāng)前a鏈接的父親

varas=document.querySelectorAll('a')

for(vari=0;ias.length;i++){

as[i].onclick=function(){

//node.removeChild(child)