摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>實戰(zhàn)熱身</title> </head> <body> <input type="text" na
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>實戰(zhàn)熱身</title> </head> <body> <input type="text" name="info"> <button>提交</button> <ul></ul> <script> let input =document.getElementsByTagName('input')[0];//獲取input框 let button=document.getElementsByTagName('button')[0];//獲取button let ul=document.getElementsByTagName('ul')[0];//獲取ul //給按鈕添加點擊事件 button.onclick=function() { let li=document.createElement('li');//創(chuàng)建一個新節(jié)點li li.innerHTML=input.value;//獲取input框中的值并賦值給li; ul.appendChild(li);//追加li,需在其父節(jié)點ul下追加 input.value='';//清空input框中的內(nèi)容 } </script> </body> </html>
通過在ul下追加li,形成留言板;li內(nèi)容的是通過將inpu框中的value值賦給了li.innerHTML;再將input框中的value賦值為‘空’。
批改老師:韋小寶批改時間:2019-02-27 09:20:51
老師總結(jié):這個寫的還是很不錯 有點東西 后期樣式可以再改一改 改成那種聊天框的形式