我的聊天信息框

Original 2019-02-01 11:43:45 215
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>聊天信息框</title></head><body> <input type="text" name="info"&

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>聊天信息框</title>

</head>

<body>


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

 <button class='bt'>发送</button>

<ul></ul>

<script>

   //获取元素

   let input = document.getElementsByName('info')[0];//获取到INPUT

   let button = document.getElementsByClassName('bt')[0];//获取到BUTTON

   let ul = document.getElementsByTagName('ul')[0];//获取到UL

   //点击事件

   button.onclick = function(){

        let li = document.createElement('li');//创建LI标签

        li.innerHTML = input.value;//文本框中的内容传至LI标签中

        ul.appendChild(li);//将用户信息显示到列表

        input.value = '';//清空文本框


   }



</script>



</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-02-01 11:45:48
Teacher's summary:经典的todolist练习, 是大多数学习dom操作的必修入门课

Release Notes

Popular Entries