Javascript insertBefore last li元素html

Question

我在我的項目中使用handlebars，我試圖創建與香草javascript的分頁鏈接。我使用的引導導航我的網頁上，我想用網頁鏈接來填充：

<nav aria-label="Page navigation"> 
     <ul class="pagination"> 
     <li> 
      <a href="#" aria-label="Previous" class="js-previous"> 
      <span aria-hidden="true">&laquo;</span> 
      </a> 
     </li> 
     <li> 
      <a href="#" aria-label="Next" class="js-next"> 
      <span aria-hidden="true">&raquo;</span> 
      </a> 
     </li> 
     </ul> 
    </nav> 

這是srcipt：

var pagination = document.querySelector('.pagination'); 

for (let i=0; i <= numberOfPages -1; i++){ 
    var link = navLinksTemplate({ pageNumber: i }); 
    pagination.insertBefore(link, pagination.lastChild); 
    } 

這是車把navLinksTemplate模板：

<li><a href="#" data-page="{{ pageNumber }}">{{ pageNumber }}</a></li> 

但是，在控制檯中，我得到：

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

我該如何做到這一點？

Answer 1

您將不得不使用document.getElementById並插入實際節點，而不是對它的引用。

<li><a href="#" id="myLink" data-page="{{ pageNumber }}">{{ pageNumber }}</a></li> 

Answer 2

navLinksTemplate不是DOM中的節點。這將起作用，你必須完成t變量的構造：

for (let i=0; i <= numberOfPages -1; i++){ 
    //var link = navLinksTemplate({ pageNumber: i }); 
    var t = document.createElement("LI"); 
    pagination.insertBefore(t, pagination.lastChild); 
    }