Управление порядком элементов HTML при их добавлении с использованием innerHTML - PullRequest
Новая
       20

Управление порядком элементов HTML при их добавлении с использованием innerHTML

0 голосов
/ 30 мая 2019

Я создаю форму, используя 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>

1 Ответ

0 голосов
/ 30 мая 2019

Спасибо Рэнди Кэсберну за предложение, он добился цели. 

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