JS实现点击按钮添加输入框并输出值
【代码】JS实现点击按钮添加输入框并输出值。
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function add(){
// var invite = document.getElementById ("invite");
// var node = invite.children[0];
// var str = node.outerHTML;
// invite.innerHTML += str + "<br / >";
//以上是失败的创建空白输入框,每次增加新输入框会使原本输入框的值消失
var li1 = document.getElementById("li1");
//创建li
var lis = document.createElement("li");
//创建文本
var texts =document.createElement('input');
texts.setAttribute('type', 'text');//输入框的类型
texts.setAttribute('name', "man");//输入框的名字
//把文本添加到li下面 appendChild
lis.appendChild(texts);
//获取到div
var invite = document.getElementById("invite");
invite.insertBefore(lis,li1);
}
function sub(){
var inp = document.getElementsByName("man");
var inputs = new Array();
for(var i=0; i<inp.length;i++){
// alert(inp[i].value); //获得输入框的值
inputs[i] = inp[i].value;
}
alert(inputs); //将输入框的值赋予inputs数组中
}
</script>
</head>
<body>
<form action="">
<p>邀请人员:<span>(点击按钮可增加邀请人 )</span></p>
<div id="invite">
<input type="text" name="man" id="mans">
</div>
<input type="button" value="+" onclick="add()">
<p>
<input type="button" value="完成" onclick="sub()">
</p>
</form>
</body>
</html>
更多推荐
所有评论(0)