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

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

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

最新手记推荐

• 使用composer下载tp5.1 • 格式化输出数据表中的数据 • 使用函数模拟块作用域 • 使用Composer下载ThinkPHP5.1并安装 • 小米商城登录页面

全部回复(0)我要回复

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