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

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

2天前6浏览0评论
<!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值

相关标签:HTMLJavaScript
    0推荐

      吴勇文

      PHP开发工程师加油!努力!奋斗!

      作者的热门手记

      PHP中文网

      未登录