repeat html element with javascript

Question

i would like to repeat my panel element from bootstrap in my for loop and display my variable mysubject in my panel title.

For example. if my data.tickets.length == 4 i should have 4 panel element and every panel got a different title. Can you help me i don t know how to repeat my panel element. I just manage to set the title so far.

Here is my code :

HTML

<div class="col-xs-3 panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

JS

function displaytickets(){
    var y = document.getElementById("mySecond").value;

    $.ajax({
      url: "https://cubber.zendesk.com/api/v2/users/"+y+"/tickets/requested.json",
      type: 'GET',
      dataType: 'json',
      contentType:'application/json',
      secure: true,
      beforeSend: function (xhr) {
          xhr.setRequestHeader("Authorization", "Basic " + btoa("[email protected]:"));
      },
      success: function (data) {
          console.log(data.tickets.length);
          for (i = 0; i < data.tickets.length; i++) {
              console.log(data.tickets[i]);

              console.log(data.tickets[i].description);
              console.log(data.tickets[i].status);
              console.log(data.tickets[i].subject);
              var mysubject = data.tickets[i].subject;

              $(".panel-title").append('<h3>'+mysubject+'</h3>');
          }
      },
  });
}

Answer 1

You can use .clone(), and you can create your panel directly from jQuery like this:

var $panel = $('<div/>').addClass('col-xs-3 panel panel-default');
$panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'));
$panel.append($('<div>Panel content</div>').addClass('panel-body'));
$('body').append($panel);

or you can clone() and existing element like this:

var $panel = $('#my-panel').clone();

and then clone it again to get each new panel. Inside your .ajax() call:

for (i = 0; i < data.tickets.length; i++) {
    var new_panel = $panel.clone(); // note the use of .clone()
    new_panel.find('.panel-title').text(data.tickets[i].subject);
    new_panel.find('.panel-body').text(data.tickets[i].description);
    $('body').append(new_panel);
}

Fiddle here