使用 innerHTML 添加 HTML 元素时管理元素的顺序

Question

我正在使用document.getElementById.innerHTML生成一个表单，并且表单最后应该有一个提交按钮。但是表单具有可变数量的字段，这些字段是通过单击按钮添加的，问题是当添加字段时，它会插入到保存按钮下方。

<button class="fontButton" onClick="addField()">&plus;</button>
<form id="tasksDataForm"></form>
<script>
var f = document.getElementById("tasksDataForm");
function addField() {
            var tasksDataFields = `<br/> <input type="text"> <br/>`;
<!-- I have to put this button to end of the form and all fields that are added to form should be inserted above it -->        
if(tasks.innerHTML == ''){
            tasks.innerHTML += '<input type="submit" value="Save">';  
        }
        tasks.innerHTML += tasksDataFields;
    }
</script>

Answer 1

感谢Randy Casburn的建议，它做到了。

<button class="fontButton" onClick="addField()">&plus;</button>
<form id="tasksDataForm">
  <div id="fieldsDiv"></div>
  <div id="submitDiv"></div>
</form>
<script>
var tasks = document.getElementById("fieldsDiv");
function addField() {
            var tasksDataFields = `<br/> <input type="text"> <br/>`;
            var submitDiv = document.getElementById("submitDiv");
            if(submitDiv.innerHTML == '')
               submitDiv.innerHTML += '<input type="submit" value="Save">';
            tasks.innerHTML += tasksDataFields;
        }
</script>