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

211

29 декабря 2017, 02:20

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

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

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

Answer 1

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

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

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

Answer 2

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

<input type="button" onclick="AddItem()" value="Add item"> 
<div id="add_scill"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как передать arguments вложенной функции?

Нужно сделать функцию, которая принимает две функции (простые матоперации), объединяет их в одну и возвращает её

324

javascript

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript». Как сделать так, чтобы он знал ее и не выдавал Warning'ов?

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript»Как сделать так, чтобы он знал ее и не выдавал Warning'ов? Вот скриншот:

253

javascript

Как быстро расставить точки с запятой, имея 10000 строк кода…?

Коротко:

282

javascript

Как JavaScript обрабатывает promise?

Шлём запрос, полученный обработчик срабатывает после получения ответа:

278