文本框提交001

原创 2019-08-29 10:10:26 529
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>文本框提交</title>


</head>

<body>

   <div class="">

       <input type="text" name="info">

       <button>提交</button>

       <ul></ul>

   </div>

   <script>

      let input=document.getElementsByName('info')[0];

      let button=document.getElementsByTagName('button').item(0);

      let ul=document.getElementsByTagName('ul').item(0);

      button.onclick=function(){

          let li=document.createElement('li');

          li.innerHTML=input.value;

          ul.appendChild(li);

          input.value='';

      }

    //innerHTML输入文本可带标签

   //  1.dom:documernt object  文档对象模型

   //  2.文档树的各个组成部分,称为节点,node

   //  3.文本text元素element文档document

   //  4.id属性,name属性,class属性,tag标签,css属性

   //  5.创建creatElement()插入末尾appendChild()删除removeCild()更新replaceChild();插入指定位置insertBefore()

   </script>

</body>

</html>


批改老师:天蓬老师批改时间:2019-08-29 15:31:40
老师总结:这个案例还有一个名称叫: todolist

发布手记

热门词条