Javascript insertBefore last li要素html

Question

私は自分のプロジェクトでハンドルバーを使用していますが、バニラの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のノードではありません。これはうまくいく、変数の構築を完了する必要があります：

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