Добавление элементов в разметку

#javascript

Как с помощью JS динамически добавлять новые контроллы (input, div и тд) ?
Пробую так :

 function AddItem()
 {
   var element = document.getElementById("add_scill").innerHTML = '111';
 }


И новый блок спан действительно добавляется в разметку, но только 1 раз а как сделать
что бы добавлялся каждый раз при вызове функции ? И связанный вопрос - что, если добавляется
не просто '...' а сложные элементы, формы и тд - описывать их в строку не очень удобно,
может есть более продвинутый способ ?
    

Ответы

Ответ 1

Элемент добавляется не 1 раз, просто каждый раз вы затираете innerHTML новым значением.

function AddItem() {
var input = document.createElement('input');
  var element = document.getElementById("add_scill");
  element.appendChild(input);
 };


Если таким образом - каждый раз будет добавляться ещё один элемент.
P.S.
Более продвинутый способ - скорее всего заюзать каку-нибудь библиотеку.


Ответ 2

function AddItem() {
  let newSpan = document.createElement('span');
  newSpan.innerText = '111';
  document.getElementById('add_scill').appendChild(newSpan);
}