Question

由于某种原因，我的自举面板不会显示正文。我通过DOM操作设置了所有元素。

我的面板标题文字显示正确，但我的正文无法显示。

我还注意到bootstrap面板主体内容没有任何元素，只有文本行。

我曾尝试为其添加文本元素，但到目前为止还没有任何工作。这是我的代码：

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)

Bootstrap面板不显示正文

2 个答案: