返回实现元素的动态......登陆

实现元素的动态添加

JasonKim2019-03-28 22:05:31172
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实战热身</title>
</head>
<body>

	<input type="text" name="info">
	<button>提 交</button>

	<ul></ul>

	<script type="text/javascript">
		// 获取元素
		let input = document.getElementsByName('info')[0];
		let button = document.getElementsByTagName('button')[0];
		let ul = document.getElementsByTagName('ul')[0];

		// 添加事件
		button.onclick = function(){
			// 创建元素  li
			let li = document.createElement('li');
			// 获取文本框内容
			li.innerHTML = input.value;
			// 添加数据
			ul.appendChild(li);
			// 清空文本框
			input.value = '';
		}

	</script>

</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送