<body
1 <body> 2 <input id="text" type="text"> 3 <button id="addBefo">从前添加</button> 4 <button id="addAfte">从后添加</button> 5 <button id="delBefo">从前删除</button> 6 <button id="delAfte">从后删除</button> 7 <div id="father"></div> 8 <script> 9 var addBefo = document.getElementById('addBefo'); 10 var addAfte = document.getElementById('addAfte'); 11 var delBefo = document.getElementById('delBefo'); 12 var delAfte = document.getElementById('delAfte'); 13 var father = document.getElementById('father'); 14 var text = document.getElementById('text'); 15 addBefo.addEventListener('click', function () { 16 var div = document.createElement('div'); 17 var textAdd = document.createTextNode(text.value); 18 father.insertBefore(div, father.firstChild); 19 div.appendChild(textAdd); 20 text.value=''; 21 }); 22 //从后添加 23 addAfte.addEventListener('click', function () { 24 var div = document.createElement('div'); 25 var textAdd = document.createTextNode(text.value); 26 father.appendChild(div); 27 div.appendChild(textAdd); 28 text.value=''; 29 }); 30 //从前删除 31 delBefo.addEventListener('click', function () { 32 father.removeChild(father.firstChild); 33 }); 34 //从后删除 35 delAfte.addEventListener('click', function () { 36 father.removeChild(father.childNodes[father.childNodes.length-1]); 37 }); 38 </script> 39 </body>
>