Blogger Information
Blog 15
fans 0
comment 0
visits 10539
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
toList留言实战-2019年1月18日
超超的博客
Original
581 people have browsed it
<!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>


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments