您的位置：首页 > Web前端 > JavaScript
Html/javascript动态添加/删除input控件到地址定位置

2015-09-01 11:18 597 查看
<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" onclick="addAchieve(this.form,this.parentNode);" value="+" />
<input id = "delAchievebtn" type="button" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航