添加更多的文本字段動態地

我用代碼http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/ HTML，JavaScript的新行（HTML）/。我的代碼是這樣的：添加更多的文本字段動態地

<HTML> 
<HEAD> 
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE> 
<SCRIPT language="javascript"> 
function add() { 

    for (i=1; i<=5; i++) 
     { 
     //Create an input type dynamically. 
     var element = document.createElement("input"); 
   
     //Assign different attributes to the element. 
     element.setAttribute("type", i); 
     element.setAttribute("name", i); 
     element.setAttribute("value", i); 
   
   
     var foo = document.getElementById("fooBar"); 
   
     //Append the element in page (in span). 
     foo.appendChild(element); 
     } 

  
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<FORM> 
<H2>Dynamically add element in form.</H2> 
Select the element and hit Add to add it in form. 
<BR/> 
<INPUT type="button" value="Add" onclick="add()"/> 
   
<span id="fooBar">&nbsp;</span> 
   
</FORM> 
</BODY> 
</HTML>

該代碼工作。但不是水平添加它，我希望每個新的文本字段添加在一個新行中。我試過在循環功能中使用</script><br/><script>,<html><br/></html>,document.write("\n")和document.write("\r\n")，但它不能像我想要的那樣工作。我該怎麼辦？

來源

2012-09-01 user1397595

爲什麼不只是這樣做呢？

var br = document.createElement("br"); 
foo.appendChild(br);

來源

2012-09-01 04:13:45 McGarnagle

您可以更改輸入的顯示風格。

function add() { 

    for (i=1; i<=5; i++) 
     { 
     //Create an input type dynamically. 
     var element = document.createElement("input"); 

     //Assign different attributes to the element. 
     element.setAttribute("type", i); 
     element.setAttribute("name", i); 
     element.setAttribute("value", i); 
     element.style.display = "block"; 

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

     //Append the element in page (in span). 
     foo.appendChild(element); 
     } 
}

祝你好運！我建議你開始爲你的JavaScript任務使用jQuery。

來源

2012-09-01 04:13:34 nicowernli

您可以嘗試在輸入元素後添加一個新的br元素。

for (i=1; i<=5; i++) 
    { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 

    //Assign different attributes to the element. 
    element.setAttribute("type", i); 
    element.setAttribute("name", i); 
    element.setAttribute("value", i); 

    var brElement = document.createElement("br"); 

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

    //Append the element in page (in span). 
    foo.appendChild(element); 
    foo.appendChild(brElement); 
    }

來源

2012-09-01 04:14:19

你可以只是簡單的將它添加到你的CSS

input{display:block;}

來源

2012-09-01 04:16:09 hsalama

添加更多的文本字段動態地

回答

相關問題