Как правильно добавить в DOM дерево 2 div?

Question

[Genri_Rus]

Доброго времени суток

Нужно в самом скрипте создать 2 дива, отдельно под каждый input

<div>
  <input type="text" placeholder="Имя">
</div>
<div>
  <input type="text" placeholder="Телефон">
</div>

Вот пытался добавить каждый div к соответствующему инпуту: https://codepen.io/Genri_Rus/pen/BXqwBb
Но почему-то ничего не получается

var input = $('input'),
    buffer = [];
    for (var i = 0; input.length > i; i++) {
        
        buffer[i] = jQuery('<div />');
        buffer[i].className = "buffer";
       
        $(input[i]).parent().insertBefore();
    }

Answer 1

[hzzzzl]

const inputs = document.querySelectorAll('input')

inputs.forEach(i => {
  const div = document.createElement('div')
  div.className = "superdiv"
  i.parentNode.appendChild(div)
})

inputs.forEach(i => i.addEventListener('input', (e) => {
  e.target.parentNode.querySelector('.superdiv').textContent = e.target.value
}))

Comments

[Genri_Rus]

Спасибо, а на jquery именно как такое сделать ?

[hzzzzl]

Genri_Rus, эээ ну примерно так же, я вообще не умею jquery, все равно он там где-то в недрах своего кода переведет под подобный код обычного нативного яваскрипта

[Genri_Rus]

hzzzzl, на нативном даже можно так:

var input = document.querySelectorAll('.input'),
  buffer = [];
for (var i = 0; input.length > i; i++) {
  buffer[i] = document.createElement('div');
  buffer[i].className = "buffer";
  input[i].parentNode.insertBefore(buffer[i], input[i].nextSibling);
}

Но как что-то похожее на jquery сделать :/

[Rustam Bainazarov]

Genri_Rus, а почему нельзя использовать нативный JS даже среди кода jQuery? Одно и то же по сути. Тем паче нативный код будет быстрее работать.

[Genri_Rus]

Рустам Байназаров, очень важно понимать как это будет работать на jquery, а как - на нативном javascript'е

P.S. Пример смогли бы показать ?

Answer 2

[Konata Izumi]

Запускайте код по событию DOMContentLoaded.
В jquery это ready.
У вас DOM еще не прогрузился, а вы js код запускаете.

Comments

[Genri_Rus]

Это не из-за этого, если убрать этот код, то все появляется:

buffer[i], $(input[i]).contents()

Полный вариант:

$(input[i]).parent().insertBefore(buffer[i], $(input[i]).contents());