使添加的LI始终显示出来？实现简单的聊天窗口
如题，使用appendChild()方法添加节点到UL列表(末尾)，当出现垂直滚动条时，请问如何让添加的LI始终显示出来，类似聊天窗口那样始终显示接收或发送的最新消息！
描述不太清楚请见谅！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#list { height: 200px;
width: 200px;
background: #450;
overflow-y:auto;
text-align: justify;
border:5px solid #fcc;}
</style>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>向列表中(末尾)添加项目</p>
<input id ="text1"type="text">
<button type="button" onclick="addNode()">添加</button>
<script>
function addNode(){
var otxt1 = document.getElementById('text1');
var oUl1 = document.getElementById('list');
var node = document.createElement('li');
var nodeText = document.createTextNode(otxt1.value)
if (otxt1.value =='') {
alert('文本为空！');
}else{
node.appendChild(nodeText);
oUl1.appendChild(node);
};
otxt1.value = "";
}
</script>
</body>
</html>
_Jason浏览 1299回答 1
1回答
随时随地看视频慕课网APP
Html/CSS
JavaScript