Question

我在我的项目中使用把手，我正在尝试使用vanilla javascript创建分页链接。我在我的页面上使用bootstrap导航，我想填充页面链接：

   <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>

但是，在控制台中我得到了：

未捕获的TypeError：无法执行'insertBefore' 在'Node'上：参数1不是'Node'类型。

我怎样才能做到这一点？

Answer 1

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);
  }

Answer 2

您必须使用document.getElementById并插入实际节点而不是对它的引用。

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

Javascript insertBefore last li element html

2 个答案: