返回 聊天信息生成原...... 登陆

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

吴勇文 2018-12-08 17:58:40 16
<!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值

最新手记推荐

• 小米商城大框架布局 • 不支持块级作用会怎样引发的问题 • 数据库写操作 • 自动加载注册函数替代include/require • 模拟智能在线客服系统

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网