页面上第一行有一个文本框四个按钮分别为从前添加从后添加从前删除从后删除...-CSDN博客

<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>