jquery点击按钮,添加一行input输入框

时间:2022-07-25
本文章向大家介绍jquery点击按钮,添加一行input输入框,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

功能需求:

点击添加按钮的时候,会添加一行input输入框,使用jquery来实现一下。虽然现在前端开发小伙伴们都不用jquery了,但是,我还是决定要记录一下这个小demo,因为用到的比较多。

示例代码:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<style>
		</style>
	</head>
	<body>
		<div id="timeCont"></div>		
		<button type="button" class="btn blue" id="fatBtn">新增区域</button>
	
	<script type="text/javascript">
		/* 新增检测时间 */
		$("#fatBtn").click(function() {
		
			var htm = "";
			htm += "<div class='form-group'>";
			htm += "<label class='col-sm-3 control-label' >区域监测时间段:</label>";
			htm += "<div class='col-sm-4'>";
			htm += "<input type='text' class='form-control sleepStart1'  name='startTime' value='09:00'  ></input>";
			htm += "</div>";
			htm += "<div class='col-sm-4'>";
			htm +="<input type='text'  class='form-control sleepStop1'   name='stopTime'  value='17:00'></input>";
		
			htm += "</div>";
			htm += "</div>";
			$('#timeCont').append(htm);			

		});
	
	</script>
</html>