核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面;
创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li;
如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>按钮</button> <ul></ul> <script> var txt = document.querySelector('textarea'); var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function() { if (txt.value == '') { alert('不能为空'); return false; } else { var li = document.createElement('li'); li.innerHTML = txt.value + '<a href="javascript:;">删除</a>'; ul.insertBefore(li, ul.children[0]); var as = document.querySelectorAll('a'); for (var j = 0; j < as.length; j++) { as[j].onclick = function() { ul.removeChild(this.parentNode) } } } } </script> </body> </html>