toList留言实战-2019年1月18日

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toList</title>
</head>
<body>
<input type="text" name="message">

<ul>
</ul>

<script>
	var message = document.querySelector('input');//获取input元素
	var ul = document.getElementsByTagName('ul')[0];//通过获取标签获取ul元素
	message.focus();//设置文本框焦点
	message.onkeydown = function(event){//当在文本框中进行按下指令时
	if(event.keyCode === 13){//判断按下的键码是否等于13，也就是回车键
			var li = document.createElement('li');//创建li元素
			li.innerHTML = message.value + ' ' + '<a href="javaScript:;" onclick="del(this)">删除</a>' + ' ' + '<a href="javaScript:;" onclick="back(this)">撤回</a>';//将文本框内容写入li标签，并添加删除和撤回功能
			if(ul.childElementcount == 0){//判断ul的子元素的数量是否为0
				ul.appendChild('li');//在ul下添加子元素li
			}else{
				var first = ul.firstElementChild;//将ul的第一个子元素赋值给变量first
				ul.insertBefore(li,first);//在li之前输入first的值
			}
		message.value = '';//将文本框清空
		message.focus();
	}
}
	function del(ele){
		if(confirm('是否删除？')){
			var li = ele.parentNode;//获取ele的父级元素，并赋值给li
			li.parentNode.removeChild(li);//li.parentNode是li的父级元素ul，从ul中删除子元素li
			message.focus();
		}
		return false;
	}
	function back(ele){
		if(confirm('是否撤回')){
			var li = ele.parentNode;
			message.value = li.firstChild.nodeValue;//将li的第一个元素节点值赋给message
			li.parentNode.removeChild(li);
			message.focus();
		}
		return false;
	}

</script>
</body>
</html>
相关文章
