带按钮和html的Javascript新输入字段

I have created this part of code. Whenever a button is pushed a new input forum field is being added in the form. How can I add text and a number beside the field each time (starting from 3)? For example: Option 1: the input type field Option 2: the input type field Option 3: the input type field and so on

我创建了这部分代码。每当按下按钮时,表单中都会添加一个新的输入论坛字段。如何每次在字段旁边添加文本和数字(从3开始)?例如:选项1:输入类型字段选项2:输入类型字段选项3:输入类型字段,依此类推

<SCRIPT language="javascript"> function add() {
//Create an input type dynamically.
var element = document.createElement("input");

//Assign different attributes to the element.
element.setAttribute("type", 'text');
element.setAttribute("value", '');
element.setAttribute("name", 'text[]');


var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);

}
</SCRIPT>

The above part of code is being used by the following (just for a reference):

以下部分代码正在使用(仅供参考):

<b>Option 1:</b> <input type="text" name="text[]" /><br />
<b>Option 2:</b> <input type="text" name="text[]" />
<input type="button" value="Add Option" onclick="add()"/>
<span id="fooBar"></span>

Thanks in advance! :)

提前致谢! :)

2 个解决方案

#1

var temp = 3;

function add() {
var element = document.createElement("input");
var span = document.createElement("span");
    span.innerHTML = "Option "+temp;
//Assign different attributes to the element.
 element.setAttribute("type", 'text');
 element.setAttribute("value", '');
 element.setAttribute("name", 'text[]');


 var foo = document.getElementById("fooBar");

  foo.appendChild(span);
  foo.appendChild(element);

temp++;
}

#2

 var optionCount = 3;

 function add() {
   //Create an input type dynamically.
   var element = document.createElement("input");
   var label = document.createElement("label");
   label.innerHTML = "Option " + optionCount++ +":"
     //Assign different attributes to the element.
   element.setAttribute("type", 'text');
   element.setAttribute("value", '');
   element.setAttribute("name", 'text[]');


   var foo = document.getElementById("fooBar");
   //Append the element in page (in span).
   foo.appendChild(label);
   foo.appendChild(element);

 }

<b>Option 1:</b> 
<input type="text" name="text[]" />
<br />
<b>Option 2:</b> 
<input type="text" name="text[]" />
<input type="button" value="Add Option" onclick="add()" />
<span id="fooBar"></span>