1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14 #demo {
15 width: 300px;
16 position: relative;
17 left: 50%;
18 margin-left: -150px;
19 margin-top: 20px;
20 }
21 #demo li {
22 font-size: 30px;
23 font-weight: bolder;
24 text-align: center;
25 height: 50px;
26 line-height: 50px;
27 margin: 10px;
28 border: 1px solid silver;
29 overflow: hidden;
30 }
31 input {
32 width: 200px;
33 position: relative;
34 left: 50%;
35 margin-left: -100px;
36 margin-top: 20px;
37 display: block;
38 text-align: center;
39 }
40 #content {
41 font-size: 25px;
42 }
43 #sub {
44 font-size: 18px;
45 }
46 </style>
47 </head>
48 <body>
49 <ul id="demo">
50 <li>11111</li>
51 <li>22222</li>
52 <li>33333</li>
53 <li>44444</li>
54 <li>55555</li>
55 </ul>
56 <input id="content" type="text" placeholder="输入内容" value="">
57 <input id="sub" type="button" value="添加内容">
58 <script>
59 window.onload = function(){
60 var demo = document.getElementById("demo");
61 var content = document.getElementById("content");
62 var sub = document.getElementById("sub");
63 demo.onclick = function (event) {
64 var e = event || window.event;
65 var target = e.target ||e.srcElement;
66 // nodeName当前元素节点名 toLowerCase转换为小写
67 // console.log(target.innerHTML);
68 if(target.nodeName.toLowerCase() == "li"){
69 console.log(target.innerHTML);
70 }
71 }
72 sub.onclick = function(){
73 var txt = content.value;
74 var temp = document.createElement("li");
75 temp.innerHTML = txt;
76 demo.appendChild(temp);
77 }
78 }
79 </script>
80 </body>
81 </html>
