jquery添加div实现消息聊天框

上代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {margin: 0;padding: 0;
}.border {margin-left: 300px;width: 900px;background-color: white;position: relative;border: 1px solid rgb(221, 221, 221);
}.border .border-next {background-color: #dcad50;position: relative;height: 23px;line-height: 40px;display: flex;padding: 10px 60px 10px 80px;
}.border-next .people {background-color: #dcad50;font-size: 20px;color: black;font-family: 楷体;margin-left: 300px;
}.border .border-second {background-color: white;margin-left: 0px;width: 700px;height: 530px;flex: 1;flex-direction: column;overflow-y: auto;border-right: 1px solid rgb(221, 221, 221);border-bottom: 1px solid rgb(221, 221, 221);
}.border .border-img {background-color: white;margin-left: 0px;width: 700px;height: 30px;border-right: 1px solid rgb(221, 221, 221);border-bottom: 1px solid rgb(221, 221, 221);
}.border-bottom {display: flex;width: 700px;height: 120px;background-color: white;overflow: auto;font-size: 20px;border-style: solid;border-color: #FFFFFF;border-right: 1px solid rgb(221, 221, 221);
}.button {display: flex;margin-left: 530px;
}.button .shut {background-color: white;width: 70px;height: 30px;font-size: 20px;text-align: center;border: 1px solid rgb(221, 221, 221);
}.button .send {background-color: white;margin-left: 15px;width: 70px;height: 30px;font-size: 20px;text-align: center;border: 1px solid rgb(221, 221, 221);background-color: #DBAC50;
}.replyChat {display:flex;width: 150px;background: #12B7F5;border-radius: 5px;/* 圆角 */position: relative;margin-left: 500px;align-content: center;margin-bottom: 30px;
}.sendChat {display:flex;width: 150px;background: #E5E5E5;border-radius: 5px;/* 圆角 */position: relative;margin-left: 50px;align-content: center;margin-bottom: 30px;border-color: white white white #E5E5E5;
}.sendChat span {display: inline-block;margin-left: 10px;line-height: 35px;
}.replyChat span {display: inline-block;margin-left: 10px;line-height: 35px;
}.sendChat .arrows {position: absolute;top: 5px;left: -16px;/* 圆角的位置需要细心调试哦 */width: 0;height: 0;font-size: 0;border: solid 8px;border-color: white #E5E5E5 white white;
}.replyChat .arrow {position: absolute;top: 5px;right: -16px;/* 圆角的位置需要细心调试哦 */width: 0;height: 0;font-size: 0;border: solid 8px;border-color: white white white #12B7F5;
}.chatTouXiang {width: 50px;height: 50px;border-radius: 50%; background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(img/tou.png);
}
.chatCnt{}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天助手</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>window.onload=function(){$(".arrow").hide();$(".arrows").hide();}document.onkeydown = function(e) {if (e.keyCode == 13 && e.ctrlKey) {// 这里实现换行document.getElementById("sendContent").value += "\n";} else if (e.keyCode == 13) {// 避免回车键换行e.preventDefault();// 下面写你的发送消息的代码f();}}function f() {var cnt = $("#sendContent").val();if(cnt == '')alert('内容不能为空');   if(cnt != ''){var node = document.createElement('div');node.className = 'sendChat';var span = document.createElement('span');span.innerHTML = cnt;var arrow = document.createElement('div');arrow.className = 'arrows';node.appendChild(span);node.appendChild(arrow);$(".border-second").append($(node));$("#sendContent").val('');$.ajax({data : cnt,type : "post",url : "CharServlet?id=" + cnt,dataType : "json",success : function(msg) {var node = document.createElement('div');node.className = 'replyChat';var span = document.createElement('span');span.innerHTML = msg.text;var arrow = document.createElement('div');arrow.className = 'arrow';node.appendChild(arrow);node.appendChild(span);$(".border-second").append($(node));var boderSecondDiv = $('.border-second');var lastChild = boderSecondDiv[0].lastChild;var lastChildH = lastChild.offsetTop;var h = 0;for (var i = 0, len = lastChild.children.length; i < len; i++) {h += lastChild.children[i].offsetHeight;}boderSecondDiv[0].scrollTop = lastChildH + h;},error : function(msg) {alert("请求失败");}});}}
</script>
</head><div class="frame"><div class="border"><div class="border-next"><div class="people">聊天助手</div></div><div class="border-second"><div class="chatCnt"><div class="chatTouXiang"></div>  <div class="sendChat"><span></span><div class="arrows"></div></div></div><div class="replyChat"><span></span><div class="arrow"></div></div><br></div><div class="border-img"></div><textarea id="sendContent" class="border-bottom"></textarea><div class="button"><button class="shut">关闭</button><button id="selectBtn" class="send" onclick="f()">发送</button></div></div>
</div>
</body>
</html>