jQuery - 多次追加HTML而不重複代碼？

Question

我試圖多次將一些HTML附加到div。

這裏是我當前如何做：http://jsfiddle.net/9m1cfL4u/

我想共計4次追加它，這種方法工作完全正常，但有一個整潔的方式做到這一點比調用同一個追加每時間？它看起來凌亂，對我來說「不合適」！

感謝您的幫助！

$('.banner').append('<div class="content"></div>'); 
$('.banner').append('<div class="content"></div>'); 
$('.banner').append('<div class="content"></div>'); 
$('.banner').append('<div class="content"></div>'); 

Answer 1

A for loop應該足夠了。

Updated Example

for (var i = 0; i < 4; i++) { 
    $('.banner').append('<div class="content"></div>'); 
} 

..和無jQuery的：

Example Here

var banner = document.querySelector('.banner'), 
    content; 

for (var i = 0; i < 4; i++) { 
    content = document.createElement('div'); 
    content.className += 'content'; 
    banner.appendChild(content); 
} 

Answer 2

而且有點票友做同樣的事情的方式。

$.fn.repeatTimes = function(times, cb) { 
 
     for(var time = 1;time <= times; time += 1) { 
 
     cb.call(this, time); 
 
     } 
 
     return this; 
 
    } 
 

 
    $(function(){ 
 
    
 
     $('.banner').repeatTimes(4, function(time) { 
 
      this.append('<div class="content">this is ' + time + ' time</div>'); 
 
     }); 
 
    });

<div class="banner"></div> 
 

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