聊天信息生成原理学习和总结

原创 2018-12-08 17:58:40 12
摘要:<!DOCTYPE html> <html> <head>  <title>聊天信息生成原理</title>  <meta charset="utf-8"> </head> <body>  <input type=&q
<!DOCTYPE html>
<html>
<head>
 <title>聊天信息生成原理</title>
 <meta charset="utf-8">
</head>
<body>
 <input type="" name="info">
    <button>提交</button>
    <ul></ul>
    <script type="text/javascript">
     var input = document.getElementsByName('info')[0];
     var button = document.getElementsByTagName('button')[0];
     var ul = document.getElementsByTagName('ul')[0];
     button.onclick = function(){
      var li = document.createElement('li');
      li.innerHTML=input.value;
      ul.appendChild(li);
      input.value = '';
      console.log(li);
     }
    </script>
</body>
</html>

QQ图片20181208175432.png

  1. 获取所需的元素

  2. 创建li标签 使用createElement()

  3. li标签获取input中的value值

  4. 将li标签添加到ul中 使用appendChild()

     5. 清空input中的value值

批改老师:Peter-Zhu批改时间:2018-12-08 18:02:04
老师总结:其实这个案例,还是一个名称 叫: todolist, 是一个经典的案例,有空多写写

发布手记

热门词条