Bootstrap panels not displaying body text

Question

For some reason my bootstrap panels won't show the body text. I have set up all my elements via DOM Manipulation.

My panel header text displays properly, however my body text doesn't show up.

I also noticed that the bootstrap panel body content does not have any elements, just lines of text.

I have tried to add text elements to it but so far nothing has been working. Here is my code:

JS

var searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', function() {
 var term = document.getElementById('term').value;
 var matched = [];
 for (var i = 0; i < hotelRooms.length; i++) {
   if (hotelRooms[i].hotel.indexOf(term) !== -1) {
     matched.push(hotelRooms[i]);
   }
 }

 for (var i = 0; i < matched.length; i++) {

   var roomResults = document.createElement('div');
   roomResults.setAttribute('id', 'results');
   roomResults.setAttribute('class', 'result-style');

   var resultsArea = document.getElementById('results-area');
       console.log(matched[i]);

   var panelDefault = document.createElement('div');
   panelDefault.setAttribute('class', 'panel-default');

   var panelHeading = document.createElement('div');
   panelHeading.setAttribute('class', 'panel-heading');

   var panelBody = document.createElement('div');
   panelBody.setAttribute('class', 'panel-body');

   var name = document.createElement('h3'); // Hotel Name
   name.setAttribute('class', 'hotel-name');
   name.textContent = matched[i].hotel;

   var price = document.createElement('div'); // Room Price
   price.setAttribute('class', 'room-price');
   price.textContent = matched[i].price;

   roomResults.appendChild(panelDefault);
   panelDefault.appendChild(panelHeading);
   panelHeading.appendChild(name);
   panelBody.appendChild(price);

   resultsArea.appendChild(roomResults);
 }
 });

Answer 1

You are never appending panelBody to panelDefault .

....
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
panelDefault.appendChild(panelBody);
....

Answer 2

You have just created a div , you need to append it to the body tag document.body.appendChild(size)

var size = document.createElement('div');
size.setAttribute('class', 'room-size');
size.textContent ="hello"
document.body.appendChild(size)