如何用Jquery或Javascript打印多個Div？

Question

我基本上有這樣的標記：

<div id="box"> 
<div id="id_1></div> 
<div id="id_2></div> 
<div id="id_3></div> 
<div id="id_4></div> 
</div> 

我希望做的是有jQuery的或JavaScript打印出用不同的ID號不同的div，請，我將如何去這樣做？我主要是一個PHP的傢伙，這是我的項目最後一件事情，讓我很難受...請幫助。

Answer 1

var box = $('#box'), 
    html = '', 
    i; 

for (i = 0; i < 4; i += 1) { 
    html += '<div id="id_' + (i + 1) + '"></div>'; 
} 

box.append(html); 

其他答案建議在循環的每次迭代中調用append。不要這樣做，這可能會對性能造成影響。如果你必須用jQuery來做到這一點，你想盡可能地減少DOM操作。

Answer 2

試試這個：

for (var i = 0; i < 4; i++) { 
    $('#box').append("<div id='id_" + (i + 1) + "'></div>"); 
} 

Answer 3

下面是代碼，你應該閱讀了關於jQuery的理解它是如何工作的。

$(function() { 
    var box = $('#box'); 
    for (var i = 0; i < 4; i++) { 
    box.append('<div id="id_' + i + '">' + i + '</div>'); 
    } 
}); 

http://plnkr.co/edit/JlAffVadhKiW6HnbWqNx?p=preview

Answer 4

創建jQuery的使用$()一個新的HTML元素。請參見下面的代碼片段：

var parent = $("<div id='box'>outer div</div>"); 
 

 
for(var i = 1; i <= 4; i++){ 
 
    var child = $("<div id='id_"+ i + "'>inner div</div>"); 
 
    parent.append(child); 
 
} 
 

 
$("body").append(parent);

div{ 
 
    border: 1px solid black; 
 
    background: red; 
 
} 
 

 
div div{ 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Relevant Documentation with Examples