HTML의 템플릿 태그 : querySelector가 null 값을 반환합니다.

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> 

그리고 템플릿을 사용하여 추가 할 div의 많은 해당 템플릿을 추가 할 jQuery를 사용합니다.

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