聊天框实现原理

原创 2019-01-09 15:34:42 373
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"&nb
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="input">
		<button onclick="submit()">提交</button>
		<ul></ul>
	</body>
	
	<script>
		var input = document.getElementsByTagName('input')[0]
		var ul = document.getElementsByTagName('ul')[0]
		
		function submit(){
			var li = document.createElement('li');
			if(input.value!=''){
				li.innerHTML = input.value;   //向新元素中添加内容  内容为input框的值
				ul.appendChild(li);   //将元素添加到列表中
				input.value = '';
			}else{
				alert('请在输入框输入信息');
				input.focus();
			}
		}
	</script>
</html>

1.获取到元素input框和元素button
2.给button绑定点击事件,点击提交按钮后创建一个新元素li,将input框的值添加到li中
3.将元素li添加到ul列表中
4.将input框的值清空


批改老师:查无此人批改时间:2019-01-09 16:41:01
老师总结:写的不错,就是代码有点少,加点样式,页面会更好看。加油。

发布手记

热门词条