Jquery实现动态添加html

最新推荐文章于 2024-07-31 11:05:25 发布

盐汽水水水

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量8.2k

点赞数 2

本文链接：https://blog.csdn.net/sinat_34311901/article/details/51657571

版权

实现效果：

单击“添加操作信息”按钮实现“房源商佣金配置的”，动态向下添加。效果如图：

jsp文件<body>中的内容：

<form action="" id="fr" name="fr">			       
			       <div id="show1"><input type="text" value="艺龙" /><input type="radio" name="isCheckip0" id="isCheckip0" οnclick='isCheckip_Click(0)'/>
			       <input id="ipAddress0"  type="text" name="ipAddress0"  />	</div>
			        <div class="row" align="right">
		
			<button type="button" id="btn"  οnclick="addOperation()">添加操作信息</button>
		</div>
	        
			    <div id="msg_2" style="display:none;"> 
         </div>   			      			   
			</form>

                 function addOperation(){
				//var operationIndex = 1;
				var operation_html="  <div id='show'>"+"<input type='text'/>"+"<input type='radio' name='isCheckip"+operationIndex +" id='isCheckip'"+operationIndex +"' οnclick='isCheckip_Click("+operationIndex +")'/>"+
			       "<input id='ipAddress"+operationIndex +"'  type='text' name='ipAddress"+operationIndex +"'  />"+"</div>";
				/*  var target=$("#btn").parentNode.next(); */
				/* var div=$(document).createElement(""); */
				$("#show1").append(operation_html);
				operationIndex++;
			};
			function isCheckip_Click(index)
			{
				$("input#ipAddress"+index).toggle();
			}

首先在<button>里设置了一个click定义为“addOperation()",在函数里，声明一个网页模板operation_html，同时声明一个变量operationIndex，从1开始递增。在利用append()函数实现追加，在参数里放入网页模板。