Question

我目前有一个小表单，用户可以在其中选择一系列文件。我有一个提交按钮，另一个按钮同时创建另一个文件元素。我想要做的就是在提交按钮上方而不是在提交按钮下方弹出每个新文件元素。这就是我到目前为止所做的。

<div id="main">
    <div class="container">
    <form action="<?php echo htmlspecialchars($_SERVER['PHP']);?>" method="post" enctype="multipart/form-data" name="upload_form" id="upload_form">
    <br />
    <input type="file" name="file"/>
    <input type="button" onclick = 'javascript: add()' value="ADD ANOTHER FILE" />
    <br />
    <input type="submit" id="submit" name="submit" value="SUBMIT" />
    </form>
    </div>
</div>

使用Javascript：

<script>
function add()
{
    var br = document.createElement("br");
    var foo = document.getElementById("upload_form");
foo.appendChild(br);
    form = document.getElementById("upload_form");
    input = document.createElement("input");
    input.type="file";
    input.name="file[]";
    form.appendChild(input);
}
</script>

Answer 1

您可以使用parentElement.insertBefore(newChild, existingChild)：

此方法会在“添加按钮”上方添加新元素，而不是像您指定的那样在提交按钮上方添加。

HTML：

<input id="addbutton" type="button" onclick = 'javascript: add()' value="ADD ANOTHER FILE" />

使用Javascript：

    var form = document.getElementById("upload_form");
    var addButton = document.getElementById('addbutton');

    var br = document.createElement("br");
    form.insertBefore(br, addButton);

    form = document.getElementById("upload_form");

    input = document.createElement("input");
    input.type="file";
    input.name="file[]";
    form.insertBefore(input, addButton);

看起来你的表单可能有一些布局问题。最好不要使用<br>，而是使用CSS样式的每一行的包装元素。这样你也可以只使用insertBefore一次（对于包装器）并且它不那么令人困惑。

此外，如果您不了解它，您应该查看jQuery。这种DOM操作曾经是它的主要优势。

Answer 2

您可以使用insertBefore，它将一个节点作为子节点插入到您指定的现有子节点之前。

如果要在submit按钮之前插入，请使用此代码

form = document.getElementById("upload_form");
var foo = document.getElementById("submit"); 
form.insertBefore(br,foo);

添加上面的提交按钮

2 个答案: