Как динамически генерировать любое количество элементов HTML во время выполнения?

Question

Есть ли способ сгенерировать html-элемент во время выполнения?

Допустим, у меня есть текстовое поле для ввода пользователем любого числа.
Требования: 1. Если пользователь вводит 10, он должен сгенерировать 10 тегов элемента IMG. 2. Мы также можем манипулировать значением IMG src 3. Каждые 10 выходных данных должны быть примерно такими: img src = "путь выбран" и т. Д., <- динамически генерируется <br>

Есть идеи / предложения?

Answer 1

HTML

<input type="text" id="myInput" />
<input type="text" id="myPath" />

Javascript

var count=document.getElementById('myInput').value;
var path=document.getElementById('myPath').value;
for(i=0; i<count; i++)
{
   var img=document.createElement('img');
   img.setAttribute('src', path);

   parent.appendChild(img); //now append the element to the desired div
}

Answer 2

Пример с jQuery:

HTML:

<input type="text" id="my-input" value="0" />
<div id="container"></div>

JS:

$('#my-input').change(function() {
  var el = $(this);
  for (var i=0; i < parseInt(el.val(), 10); i++) {
    $('#container').append('<img src="blabla" />');
  }
});

Answer 3

Вы можете использовать document.createElement() т.е.

for(var x = 0; x < 10; x++){
   var img = document.createElement("img");
   // set the properties
   ... 
}

Answer 4

С фреймворком JavaScript это просто.

jquery, например:

for(var a=0;a<number;a++){
    var newelement = $('<img............../>');
    $('#parentElement').append(newelement);
}