简单留言板发言
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { background-color: springgreen; } </style> </head> <body> <textarea name="" id="" cols="30" rows="10">123</textarea> <button>发布</button> <ul> </ul> <script> //1.获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); //2.注册事件 btn.onclick = function() { //(1)创建元素 if(text.value == ''){ alert('您没有输入'); return false; }else{ var li = document.createElement('li'); //(2)添加元素 // ul.appendChild(li); ul.insertBefore(li,ul.children[0]); //现有li li.innerHTML = text.value;//inner } } </script> </body> </html>