在新行(html）中动态添加更多文本字段

Add more text fields dynamically in new line (html)

本文关键字：添加 文本 字段 动态 新行 html      更新时间：2023-09-26

我使用了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")，但它的工作方式与我想要的不一样。我该怎么办？

为什么不直接这么做呢？

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

您可以更改输入的显示样式。

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。

您可以尝试在输入元素后添加一个新的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 );
  }

您只需将其添加到css 中即可

input{display:block;}
相关文章：