在新行中動態添加更多文本字段（html）

Question

我使用了來自http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/ html-javascript /的代碼。我的代碼是這樣的：

<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")在循環函數中，但它不能像我想要的那樣工作。 我該怎么辦？

Answer 1

為什么不這樣做呢？

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

Answer 2

您可以更改輸入的顯示樣式。

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

祝好運！ 我建議您開始將jQuery用於JavaScript任務。

Answer 3

您可以嘗試在輸入元素之后添加新的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 );
  }

Answer 4

您只需將其添加到您的CSS

input{display:block;}

在新行中動態添加更多文本字段（html）

問題描述

4 個解決方案

解決方案1
4 已采納 2012-09-01 04:13:45

解決方案2
1 2012-09-01 04:13:34

解決方案3
0 2012-09-01 04:14:19

解決方案4
0 2012-09-01 04:16:09

在新行中動態添加更多文本字段（html）

問題描述

4 個解決方案

解決方案1 4 已采納 2012-09-01 04:13:45

解決方案2 1 2012-09-01 04:13:34

解決方案3 0 2012-09-01 04:14:19

解決方案4 0 2012-09-01 04:16:09

解決方案1
4 已采納 2012-09-01 04:13:45

解決方案2
1 2012-09-01 04:13:34

解決方案3
0 2012-09-01 04:14:19

解決方案4
0 2012-09-01 04:16:09