1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 #box{
12 width: 600px;
13 border: 1px solid black;
14 padding:30px 0;
15 margin: 100px auto;
16 }
17 textarea{
18 resize: none;
19 }
20 ul{
21 list-style: none;
22 }
23 li{
24 width: 400px;
25 margin: 0 80px;
26 border-bottom: 1px dashed #aaa;
27 }
28 li a{
29 float: right;
30 }
31 </style>
32 </head>
33 <body>
34 <div id="box">
35 微博发布:
36 <textarea name="" id="txt" cols="60" rows="10"></textarea>
37 <button id="dist">发布</button>
38 </div>
39 <script>
40 // 获取文本节点和发布按钮节点
41 let txt = document.getElementById(‘txt‘);
42 let btn = document.getElementById(‘dist‘);
43 //创建并插入ul
44 let ul = document.createElement(‘ul‘);
45 txt.parentNode.appendChild(ul);
46 // 给发布按钮绑定单击事件的事件处理程序
47 btn.addEventListener(‘click‘,function () {
48 if (!txt.value){// 如果为空则不继续执行
49 alert( ‘输入不能为空！‘);
50 return;
51 }
52 // 创建li节点并装入内容，然后插入
53 let li = document.createElement(‘li‘);
54 li.innerHTML=txt.value+‘<a href="javascript:void(0);">删除</a>‘;
55 ul.insertBefore(li,ul.children[0]);
56
57 //清空文本框内容
58 txt.value=‘‘;
59 //给刚加入的li节点内的a标签绑定事件处理程序
60 li.getElementsByTagName(‘a‘)[0].addEventListener(‘click‘,function () {
61 ul.removeChild(this.parentNode);
62 })
63 })
64 </script>
65 </body>
66 </html>
原文地址：https://www.cnblogs.com/ustc-yy/p/12074179.html
时间： 2025-01-07 12:29:29