zoukankan      html  css  js  c++  java
  • 页面上第一行有一个文本框 四个按钮 分别为 从前添加 从后添加 从前删除 从后删除

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

    >

  • 相关阅读:
    tomcat8.5配置redis实现session共享(tomcat-redis-session-manager-master)
    HDU4292(KB11-H 最大流)
    HDU4280(KB11-G 最大流)
    POJ1149(最大流)
    POJ3281(KB11-B 最大流)
    POJ3436(KB11-A 最大流)
    Codeforces841B
    Codeforces841A
    HDU2255(KB10-K 二分图最大权匹配)
    HDU1281(KB10-D 二分图最大匹配)
  • 原文地址:https://www.cnblogs.com/jiaoyue/p/6765272.html
Copyright © 2011-2022 走看看