How to fill the div elements with javascript/jquery -

i have code showing data mysql. can fill divs innerhtml, when use += concates values in array. need create new elements in div. how should 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 div html show div need fill , create 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 work, maby explain how use createelement, , how create child-divs parent div dom elements.

thank time spend think on problem.

you use jquery append function that, here quick example:

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

or

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