Шаблон тега в HTML: querySelector просто возвращает нулевое значение

Question

Я также делаю веб-сайт для образовательных целей, но у меня возникла ошибка, которую я сам не могу понять.

Я написал шаблон как:

<div class="row" style="height: 75%;" align="center" id="room-list">
  <template id="room-template" class="slide">
    <div class="col-md-4" id="left-item">
      <div class="panel panel-default panel-primary">
        <div class="panel-heading">
          <span id="room-type"></span>
        </div>
        <div class="panel-body">
          <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
          <div id="utility">
            Utilities:
          </div>
          <div id="price">
            Price:
            <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
            <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
          </div>
        </div>
        <div class="panel-footer">
          <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="center-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  <div class="col-md-4" id="right-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div>
          <img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
        </div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  </template>
</div>

И я использую jquery, чтобы добавить этот шаблон к множеству элементов div с помощью шаблона.

var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i++) {
  var room = roomEntities[i];
  var price = priceEntities[i];
  var type = room.type;
  var thumbnail = room.thumbnail;
  var sale = price.sale;
  var original = price.original;

  for (var i = 0; i < 3; i++) {
    var slt = "#center-item";
    if (i == 0) {
      slt = "#left-item";
    }
    else
      slt = "#right-item";
    var tpl = document.getElementById('room-template');
    tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;
    tpl.querySelector(slt + '.panel-body #thumbnail').attr('src') = thumbnail;
    tpl.querySelector(slt + '.panel-body #sale').innerText = sale;
    tpl.querySelector(slt +'.panel-body #original').innerText = original;
    roomList.appendChild(tpl.content.cloneNode(true));
  }
}

Но это всегда возвращает ошибку при tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; сказано Cannot set property innerText of null, это означает, что не может найти элемент в шаблоне.

Любой совет или рекомендуется. Пожалуйста помоги. Большое спасибо

Answer 1

Изменить все селекторы в вашем коде

   tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText
    tpl.querySelector(slt + ' .panel-default .panel-heading #room-type').innerText