Montando div dinamico com jQuery

Olá amigos, estou batendo bastante cabeça aqui pra montar esse div do meu projeto da faculdade, vamos lá:

hoje eu tenho essa div montada em HTML:

<div class="col-lg-10 text-questionario">
 <div class="panel">
 <div class="panel-heading">
 <h3 class="panel-title">
 <span class="item-questionario" >31</span>
 <button type="button" class="btn btn-info btn-lg header-button">Esconder</button>
 <a class="fancybox fancybox.ajax" href="ajax.php?id=20">
 <button type="button" class="btn btn-default btn-lg header-button">Dicas</button>
 </a>

 </h3>
 <hr>
 </div>
 <div class="panel-body">
 <div class="div-questao">
 <p>No programa do balé Parade, apresentado em 18 de maio de 1917, foi empregada publicamente, pela primeira vez, a palavra sur-realisme. Pablo Picasso desenhou o colagem de ações isoladas seguindo um estímulo musical.</p>
 </div>
 <hr>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente.
 </label>
 </div>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente.
 </label>
 </div>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente.
 </label>
 </div>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente.
 </label>
 </div>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>D) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente.
 </label>
 </div>
 <div class="radio div-radio-questao">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
 <b>E) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit animi esse at ullam voluptates qui accusamus corporis quis perferendis, explicabo, ad quod impedit unde aliquid dolore rerum sapiente suscipit.
 </label>
 </div>

 </div>
 <hr>
 </div>
 </div >

Estou tentando melhorar ela e monta-la utilizando jQuery pra poder reduzir o trafego entre o servidor e tornar a aplicação mais maleável pois utilizarem Ajax para tal, mas isso já a segunda parte).

O meu foto é quero criar uma função a qual eu passe um vetor de dados e ela em sí venha montar a div em questão com os dados estruturados. Porem como já disse estou batendo legal cabeça com isso. o que progredi até agora foi isso:

 <script type="text/javascript">
 $('<div/>', {
 id: 'q_div-',
 class: 'col-lg-10 text-questionario'
 }).appendTo( "#main-container" );
 $('<div/>', {
 id: 'q_div-painel',
 class: 'painel'
 }).appendTo( "#q_div-" );
 $('<div/>', {
 class: 'painel-heading'
 }).appendTo( "#q_div-painel" );
 $('<h3/>', {
 class: 'panel-title'
 }).appendTo( ".painel-heading" );

 $('<span/>', {
 class: 'item-questionario',
 text: '33'
 }).appendTo( ".painel-title" );
 $('<hr/>').appendTo( ".painel-heading" );

 jQuery('<div/>', {
 id: 'foo',
 href: 'http://google.com',
 title: 'Become a Googler',
 rel: 'external',
 text: 'Go to Google!'
}).appendTo('.painel-heading');

 </script>

Porem estou achando com uma enorme cara de Gambiarra.

então, Alguém poderia me ajudar nessa?