Html/javascript动态添加/删除input控件到地址定位置

最新推荐文章于 2024-06-11 19:52:05 发布

dusea

最新推荐文章于 2024-06-11 19:52:05 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/dusea/article/details/48155621

版权

Html/javascript动态添加/删除input控件到地址定位置

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
<!--
label {display:block;}
-->
</style>
</head>
<body>

<form id="my-form" action="reginfo.php" method="post">
<div>
    <button type="submit">发布</button>
    <button type="button" onclick = "SaveAs()">另存</button>
    <input type="reset" /> 
<input type="text" id="testtext" /><br/>
</div>

 <div class="achievement">
  <h2>成果基本信息修改：</h2>
  <p>成果名：成果位置：</p>
 </div>

 <div class="content">
  <h2>成果内容</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>
<div id="achieve"></div>
<input id = "addAchievebtn" type="button" οnclick="addAchieve(this.form,this.parentNode);" value="+" />
<input id = "delAchievebtn" type="button" οnclick="delAchieve();" value="-" />
<div id="achieveAddContent"></div>
<div class="picture">
  <h2>成果内容</h2>
<div id="pic2"></div>
</div>
<div class="audit">
  <h2>审核内容</h2>
<div id="audit"></div>
</div>
</form>

<script type="text/javascript">

    var textNumber = 0;
	function insertAfter(newElement,targetElement) { 
	var parent = targetElement.parentNode;  
	if (parent.lastChild == targetElement) {
	// 如果最后的节点是目标元素，则直接添加。因为默认是最后    
		parent.appendChild(newElement);  
	} else {    
		parent.insertBefore(newElement,targetElement.nextSibling);
		//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
	   }
	}

    function addAchieve(form, afterElement){
	/*
	var inputtxt = document.createElement('input');
    inputtxt.setAttribute('type', 'text');
    inputtxt.setAttribute('name', 'inputContent');
    inputtxt.setAttribute('class', 'git');
	
	var spanloc =document.createElement("span");    
	spanloc.appendChild(inputtxt);
	var location = document.getElementById("achieveAddContent");  
	insertAfter(spanloc,location); 
	*/
	 // Increment the textbox number
	  textNumber++;
	  // Create the label
	  var label = document.createElement("label");
	  // Create the textbox
	  var textField = document.createElement("input");
	  textField.setAttribute("type","text");
	  textField.setAttribute("name","txt"+textNumber);
	  textField.setAttribute("id","txt"+textNumber);
	  // Add the label's text
	  label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
	  // Put the textbox inside
	  label.appendChild(textField);
	  
	  var Container =document.createElement("span");    
	  Container.appendChild(label);
	  var location;
	  if(textNumber==1)
	  {
	   var location = document.getElementById("delAchievebtn"); 
	  }else{
	  var num = (textNumber-1);
	    var location = document.getElementById("txt"+(textNumber-1));
	  }
	   
	  insertAfter(Container,location); 
	  
	  
	  //指定的div区域内插入控件
	  var label2 = document.createElement("label");
	  // Create the textbox
	  var textField2 = document.createElement("input");
	  textField2.setAttribute("type","text");
	  textField2.setAttribute("name","txtinput"+textNumber);
	  textField2.setAttribute("id","txtinput"+textNumber);
	  // Add the label's text
	  label2.appendChild(document.createTextNode("Text#"+textNumber+": "));
	  // Put the textbox inside
	  label2.appendChild(textField2);
	  
	  //document.body.appendChild(input);//如果采用此句，则直接加在body的最后面      
	  //document.getElementById("pic2").innerHTML += '<input type="text"/><br>';//这种方式是加在某个div上面
	  
	  var Container2 =document.createElement("span");    
	  Container2.appendChild(label2);
	  var location2;
	  if(textNumber==1)
	  {
	   var location2 = document.getElementById("pic2"); //这种方式是加在某个div上面
	  }else{
	  var num = (textNumber-1);
	    var location2 = document.getElementById("txtinput"+(textNumber-1));
	  }
	   
	  insertAfter(Container2,location2); 
	  //指定位置插入控件结束
	  
	  //form.insertBefore(label,afterElement);
      return false;
	}
	
	function delAchieve() {
	  if (textNumber > 0) { // If there's more than one text box
		// Remove the last one added
		//removeChild(document.getElementById("txt"+(textNumber-1)).parentNode);		
		//document.getElementById("txt"+textNumber).parentNode.removeChild(document.getElementById("txt"+textNumber)); 
		var node = document.getElementById("txt"+textNumber).parentNode;
		node.parentNode.removeChild(node);
		//document.getElementById("txt"+textNumber).parentNode.parentNode.removeChild(document.getElementById("txt"+textNumber).parentNode); 
		node = document.getElementById("txtinput"+textNumber).parentNode;
		node.parentNode.removeChild(node);
		
		textNumber--;
	  }
	}
</script> 
</body>
</html>

dusea

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html/javascript动态添加/删除input控件到地址定位置

Html/javascript动态添加/删除input控件到地址定位置 发布另存成果基本信息修改：成果名：成果位置：成果内容 some text. some text. some text... ... 成果内容
复制链接

扫一扫