使用javascript添加表单字段..但在下面，不是一边？答案

【问题标题】：using javascript to add form fields.. but below, not to the side?使用javascript添加表单字段..但在下面，不是一边？
【发布时间】：2009-12-23 05:23:03
【问题描述】：

所以当我点击按钮时，javascript 会添加新字段。目前它在旁边添加了新的文本框..有没有办法让它在下面添加？我猜好像有一个
。这是代码。谢谢！

<html>
<head>
    <script type="text/javascript">
        var instance = 1;

        function newTextBox(element)
        {       
            instance++; 
            var newInput = document.createElement("INPUT");
            newInput.id = "text" + instance;
            newInput.name = "text" + instance;
            newInput.type = "text";
            //document.body.write("<br>");
            document.body.insertBefore(newInput, element);
        }
    </script>
</head>


<body>
    <input id="text2" type="text" name="text1"/> <br>
    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

【问题讨论】：

标签： javascript html field

【解决方案1】：

在插入的输入之前插入一个<br/>标签，或者更好的是，将输入放入一个div并用CSS控制它的外观。

【讨论】：

【解决方案2】：

将此添加到函数的末尾：

document.body.insertBefore(document.createElement("br"), element);

完整代码：

<html>
<head>
        <script type="text/javascript">
                var instance = 1;

                function newTextBox(element)
                {               
                        instance++; 
                        var newInput = document.createElement("INPUT");
                        newInput.id = "text" + instance;
                        newInput.name = "text" + instance;
                        newInput.type = "text";
                        //document.body.write("<br>");
                        document.body.insertBefore(newInput, element);

                        document.body.insertBefore(document.createElement("br"), element);
                }
        </script>
</head>


<body>
        <input id="text2" type="text" name="text1"/> <br>
        <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>

【讨论】：

【解决方案3】：

只需以相同的方式创建一个<br> 元素并将其放在两者之间。

var newBr = document.createElement("BR");
document.body.insertBefore(newBr, element);

或者使用 CSS。 display:block 可能有价值。

【讨论】：

【解决方案4】：

您可以在新输入之后插入 br 元素，或者将其包装在 div 元素中：

function newTextBox(element) {                
    instance++; 
    var newInput = document.createElement("INPUT"); 
    newInput.id = "text" + instance; 
    newInput.name = "text" + instance; 
    newInput.type = "text"; 

    var div = document.createElement('div'); 
    div.appendChild(newInput); 
    document.body.insertBefore(div, element); 
}

查看上面的例子here。

【讨论】：