第JavaScript實現簡單版的留言發布與刪除btn.onclick=function(){

//創建li元素因為是每按一次按鈕，下面就會添加一個li，需要用到循環

//需要判斷，當文本框里面的內容為空時，按下按鈕是不會添加的

if(text.value!=''){

varli=document.createElement('li')

ul.appendChild(li)

//添加節點

//賦值li里面的內容

li.innerHTML=text.value

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

text.value=''

/script

/body

/html

分析：

1、點擊按鈕后，就動態創建一個li，添加到ul里面

2、創建li的同時，把文本域中的值通過li.innerHTML賦給li

3、如果想把新的留言顯示到后面就用appendChild，如果顯示到前面就用insertBefore

怎么實現放在前面：

并且實現刪除留言的案例：

添加li后面對應添加一個刪除按鈕

1、把文本域的值賦值給li的同時多加一個刪除的鏈接

2、需要把每個鏈接獲取過來，當點擊某一個鏈接的時候，刪除當前鏈接所在的li;也就是當前鏈接的父親

3、阻止鏈接跳轉可以添加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發布/button

/ul

script

//點擊發布按鈕，獲取文本域中的文本，給下面新創建li中的值

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

vartext=document.querySelector('textarea')

varbtn=document.querySelector('.btn')

varul=document.querySelector('ul')

console.log()

//當按下按鈕后就創建新的li元素,放到ul的后面

btn.onclick=function(){

//創建li元素因為是每按一次按鈕，下面就會添加一個li，需要用到循環

//需要判斷，當文本框里面的內容為空時，按下按鈕是不會添加的

if(text.value!=''){

varli=document.createElement('li')

//li里面創建一個p放內容

//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)

//添加節點

//賦值li里面的內容

li.innerHTML=text.value+"ahref='javascript:;'刪除/a"

//dele.innerHTML='刪除'

//dele.style.float='right'

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

text.value=''

//刪除元素，刪除的是li,當前a鏈接的父親

varas=document.querySelectorAll('a')

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

as[i].onclick=function(){

//node.removeChild(child)