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>