Javascript 添加<；br>；上面的提交按钮

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

<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>

您可以使用
parentElement.insertBefore（newChild，existingChild）
：

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

HTML:

看起来您的表单可能有一些布局问题。最好不要使用

，而是使用CSS样式为每行使用一个包装器元素。这样，您也只能使用
insertBefore
一次（对于包装器），这样就不那么容易混淆了

此外，如果你没有意识到这一点，你应该调查一下。这种DOM操作曾经是它的主要优点。
您可以使用
insertBefore
，它将节点作为子节点插入到您指定的现有子节点之前

当您想在
提交
按钮之前插入时，请使用此代码

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

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

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

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