如何在運行時動態生成任何給定數量的HTML元素？

Question

有什麼辦法可以在運行時生成任何html元素？

比方說，我有一個文本字段供用戶輸入任意數字。
要求： 1.如果用戶輸入10，則應該生成10個IMG元素標籤。 2.我們也可以操縱IMG的值SRC 3.各10輸出應該類似IMG SRC =「路徑選擇」等，生成--Dynamically <

任何想法/建議？

Answer 1

實施例與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 2

隨着javascript框架這很容易。

的jQuery例如：

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

Answer 3

您可以使用document.createElement()即

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

Answer 4

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 
}