jQuery - Append HTML more than once without repeating code?

Question

I'm trying to append some HTML to a div multiple times.

Here's how I'm currently doing it: http://jsfiddle.net/9m1cfL4u/

I want to append it 4 times in total, this method works perfectly fine but is there a tidier way to do this than calling the same append every time? It looks messy and "un-proper" to me!

Thanks for any help!

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

Josh Crozier · Accepted Answer · 2015-02-07 18:56:07Z

4

A for loop should suffice.

Updated Example

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

..and without 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);
}

edited Feb 7, 2015 at 18:56

answered Feb 7, 2015 at 18:48

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dmi3y · Accepted Answer · 2015-06-23 23:30:47Z

0

And little bit fancier way of doing same thing.

    $.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>

edited Jun 23, 2015 at 23:30

answered Feb 7, 2015 at 19:56

dmi3y

3,5322 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery - Append HTML more than once without repeating code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related