不会了还请老师补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM实战模拟智能在线客服系统</title>
<style>
div:nth-child(1){
width:400px;
height: 500px;
background: lightskyblue;
margin:30px auto;
color:#333;
box-shadow: 2px 2px 2px #808080;
}
h2 {
text-align: center;
margin-bottom: -10px;
}
div:nth-child(2){
width:300px;
height: 350px;
background: white;
margin:30px auto;
color:#333;
box-shadow: 2px 2px 2px #808080;
}
input {
width: 300px;
height: 40px
}
button {
width: 60px;
height: 40px;
background: white;
border: none;
}
button:hover{
background: orange;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>在线客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<input type="text" name="info">
<button>发送</button>
</div>
<script>
//
let button = document.getElementsByTagname('button')[0];
let input = document.getElementsByName('info')[0];
let ul = document.getElementsByTagname('ul')[0];
button.onclick = function(){
let li = document.createElement('li');//创建LI标签
li.innerHTML = input.value;//文本框中的内容传至LI标签中
ul.appendChild(li);//将用户信息显示到列表
input.value = '';//清空文本框
}
</script>
</body>
</html>