帶有按鈕和html的Javascript新輸入字段

Question

我已經創建了這部分代碼。 每當按下按鈕時，都會在表單中添加新的輸入論壇字段。 每次如何在字段旁邊添加文本和數字（從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>

以下部分正在使用上面的代碼（僅供參考）：

<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>

提前致謝！ :)

Answer 1

  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> 

Answer 2

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++;
}