引導面板不顯示正文

Question

由於某些原因，我的引導面板不會顯示正文。 我已經通過DOM Manipulation設置了所有元素。

我的面板標題文本顯示正確，但是我的正文文本沒有顯示。

我還注意到，引導面板的主體內容沒有任何元素，只有幾行文字。

我嘗試向其中添加文本元素，但到目前為止沒有任何效果。 這是我的代碼：

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

您永遠不會將panelBody附加到panelDefault 。

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

Answer 2

您剛剛創建了div ，需要將其附加到body標簽document.body.appendChild(size)

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