<!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>to do list</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } </style> </head> <body> <textarea name="" id=""></textarea> <button>按钮</button> <ul> </ul> <script> var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); //给btn添加点击事件 btn.onclick = function () { if (text.value == '') { alert('请输入内容'); return false; } else { //1 创建元素 var li = document.createElement('li'); //2 把用户输入的内容 赋值给 li li.innerHTML = text.value; //3 添加入元素 ul.insertBefore(li,ul.children[0]); } } //给text的添加焦点事件 text.onfocus = function () { text.value = ''; } </script> </body> </html>