Не понимаю, почему не работает ChildNode.before()

Здраствуйте! Решился я сделать простенькую програму проверки правильности умножения двух чисел. Некий тест, где в конце бы выводилась информация о количестве сделанных ошибок. В html документе минимум тегов.

HTML

<body onload="main()">
    <span id="firstSpan">Test1:</span>
    <span id="secondSpan">Test2:</span>
    <form id="mainForm">
        <input type="text" id="text">
    </form>
</body>

Все проблемы начинаются в скрипте:

JS

function main() {
...
            var input = document.getElementById("text");
            var str = document.createElement('span');
            str.innerHTML = numb1 + " x " + numb2 + " =";
            str.before(input); // На сколько я понимаю проблема вот в этой строчке кода. Я что-то делаю не так и она вместо того, чтобы вставляться перед полем input не делает ничего.
...
        }

Не понимаю, что я делаю не так, т.к довольно часто у меня бывают ситуации, когда этот метод может упросить мне жизнь, а я не понимаю, как им пользоваться и почему он у меня не работает(


Ответы (1 шт):

Автор решения: Igor

function main() {
  var input = document.getElementById("text");
  var str = document.createElement('span');
  str.innerHTML = "TEST";//numb1 + " x " + numb2 + " =";
  //str.before(input);
  input.before(str);
}
<body onload="main()">
  <span id="firstSpan">Test1:</span>
  <span id="secondSpan">Test2:</span>
  <form id="mainForm">
    <input type="text" id="text">
  </form>
</body>

→ Ссылка