How to fill the div elements with javascript/jquery

Question

I have this code for showing data from MYSQL. I can fill the divs with innerHTML, but when I use += then it concates all the values in the array. But i need to create new elements in div. How should i implement it?

jQuery(document).ready( function() {
$(".dropdown-item").click( function() {
    var data = { action: 'get_data',
      id: $(this).attr('id')
      };
      var parent= document.getElementById('info-block bg-grey m-b-2 p-a');
      var name = document.getElementsByClassName('h4 underline-sm')[0];
      var job = document.getElementsByClassName('m-b-1')[3];
      var phone=document.getElementsByClassName('m-b-0')[6];
      var image= document.getElementsByClassName('col-sm-4 text-xs-right m-b-1')[0];
   jQuery.ajax({
        cache: false,
        url: '/wp-admin/admin-ajax.php',
        data: data,
        dataType:'JSON',
        method: 'POST',
           success: function(response) {
            $.each(response, function(key, value){

            //

            name.innerHTML=response[key].firstname + ' ' + response[key].lastname;
            job.innerHTML ='<b>' + $.trim(response[key].job_title)  + ' <br>Tööruum: ' + $.trim(response[key].room) + '<br/><a href="mailto:' +  $.trim(response[key].email) + '>"' + $.trim(response[key].email)+ '</a></b>' ;
            phone.innerHTML=$.trim(response[key].phone) + ' ' + $.trim(response[key].cell_phone);
            image.innerHTML='<img src="'+ $.trim(response[key].image) +'" class="rounded-circle lg" alt="">';

                           });

        }  
   });
});
});

I'm adding a div from HTML also to show what div i need to fill and create with loop.

<div class="info-block bg-grey m-b-2 p-a-2">  <!--parent div-->
                    <h4 class="h4 underline-sm">  </h4>   <!--response[key].firstname+ ' ' response[key].lastname-->
                    <div class="col-sm-8 text-xs-left">
                        <p class="m-b-1"></p> <!--'<b>' + $.trim(response[key].job_title)  + ' <br>Tööruum: ' + $.trim(response[key].room) + '<br/><a href="mailto:' +  $.trim(response[key].email) + '>"' + $.trim(response[key].email)+ '</a></b>' -->
                        <p class="m-b-0"></p> <!--response[key].phone + ' ' + response[key].cell_phone-->
                    </div>
                    <div class=" col-sm-4 text-xs-right m-b-1">
                        <img src="" class="rounded-circle lg" alt="">  <!--to src response[key].image-->
                    </div>
                </div>

I don't need someone to do the work, but someone maby could explain how to use createelement, and how to create child-divs to parent div with DOM elements.

Thank you all for your time you spend to think on my problem.

Answer 1

You could use jQuery append function to do that, here is a quick example:

$('.h4').append(response[key].firstname + ' ' + response[key].lastname);

OR

$('.underline-sm').append(response[key].firstname + ' ' + response[key].lastname);